节流、防抖

最新推荐文章于 2025-05-03 22:08:14 发布

zhaohanqq

最新推荐文章于 2025-05-03 22:08:14 发布

阅读量230

点赞数

分类专栏： JS 文章标签：防抖节流

本文链接：https://blog.youkuaiyun.com/zhaohanqq/article/details/90293090

版权

JS 专栏收录该内容

17 篇文章

订阅专栏

博客介绍了节流和防抖技术，用于处理事件处理函数高频调用，减少浏览器负担。节流尽量减少触发次数，按固定时间间隔执行；防抖则是在一定时间段无触发后执行一次。还举例说明在页面无限加载场景下，节流更适用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

节流和防抖主要处理事件处理函数高频调用，减少浏览器负担

节流：尽量减少触发次数，mint-ui上封装了一个方法

    <script>
        var throttle = function (fn, delay) {
            var now, lastExec, timer, context, args; //eslint-disable-line

            var execute = function () {
                fn.apply(context, args);
                lastExec = now;
            };

            return function () {
                context = this;
                args = arguments;
                now = Date.now();
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
                console.log(lastExec)
                if (lastExec) {
                    var diff = delay - (now - lastExec);
                    if (diff < 0) {
                        execute();
                    } else {
                        timer = setTimeout(() => {
                            execute();
                        }, diff);
                    }
                } else {
                    execute();
                }
            };
        };
        var scrolls = throttle(aaa, 1000);
        function  aaa(){
            console.log(111111)
        }
        scrolls();
        scrolls();
        scrolls();
        scrolls();
        scrolls();
        scrolls();
        scrolls();
    </script>

throttle 方法return出来一个方法（闭包），所以throttle执行完后，在闭包里使用的局部变量和方法都没有销毁，将每次执行fn的时间记录到lastExec变量中。
第一次时fn会被执行，以后都会有delay时间的限制，delay时间一到就会执行一次事件处理函数。
最后的输出结果是
在这里插入图片描述

防抖：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
上来不会执行，当满足指定的时间后才会执行
也就是将几次操作合并为一次操作进行

function debounce(fn, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout !== null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, wait);    
    }
}

借用别人总结的话：函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。