重学JS之 节流、防抖

防抖（Debounce）是一种用于延迟执行函数的技术，确保在事件触发后的一段时间内不再触发时，才执行函数。它的主要作用是减少高频事件的调用次数，优化性能。

节流（Throttle）是一种用于限制函数调用频率的技术。它的主要作用是确保在一定时间间隔内，某个函数只会被执行一次，从而减少不必要的重复调用，优化性能。

    <button id="btn1">按钮+1</button>
    <button id="btn2">定时五秒</button>
    <script>
        const btn1 = document.getElementById('btn1');
        btn1.onclick = debounce(function() {
            console.log(1);
        }, 1000);

        const btn2 = document.getElementById('btn2');
        btn2.onclick = throttle(function() {
            console.log(2);
        }, 3000);

        // 防抖: 在事件被触发n秒后再执行回调，如果n秒内事件被触发，则重新计时
        function debounce(fn, delay) {
            var timer = null;
            return function() {
                var context = this;
                var args = arguments;

                clearTimeout(timer);
                timer = setTimeout(function() {
                    fn.apply(context, args);
                }, delay);
            }
        }

        // 节流:是一种用于限制函数调用频率的技术。它的主要作用是确保在一定时间间隔内，某个函数只会被执行一次，从而减少不必要的重复调用，优化性能。
        function throttle(fn, delay) {
            var timer = null;
            return function() {
                var context = this;
                var args = arguments;

                if (!timer) {
                    timer = setTimeout(function() {
                        fn.apply(context, args);
                        timer = null;
                    }, delay);
                }
            }
        }
    </script>
</body>