防抖节流（立即执行/非立即执行）

最新推荐文章于 2022-11-10 13:52:07 发布

原创最新推荐文章于 2022-11-10 13:52:07 发布 · 550 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了JavaScript中的防抖(debounce)和节流(throttling)技术，通过示例代码展示了它们的区别。防抖在事件频繁触发时仅允许最后一次执行，而节流则在设定的时间间隔内执行一次。关键区别在于首次触发时的行为：防抖会清除定时器重新开始，而节流则返回false等待定时器自动清除。这两种技术常用于优化性能，如滚动事件监听和窗口resize处理。

下面的两个都是立即执行版：

// debounce 防抖
        function debounce (fn,immediate) {
            var timer;
            return function() {
                if(timer)  clearTimeout(timer);
                immediate && !timer && fn();  // 首次进入，立即执行（立即执行开启，定时器没开启）
                timer = setTimeout(() => {
                    timer = null;
                }, 1000)
            }
        }

        // throttling 节流
        function throttling(fn,immediate) {
            var timer;
            return function () {
                if (timer) return false;
                !timer && immediate && fn();
                timer = setTimeout(() => {
                    timer = null;
                }, 1000)
            }
        }

        document.getElementById("btn").onclick = throttling(function () {
            console.log(1)
        },true)