防抖和节流

最新推荐文章于 2022-07-04 16:38:47 发布

Qian_mos

最新推荐文章于 2022-07-04 16:38:47 发布

阅读量215

点赞数 1

分类专栏：前端文章标签：防抖和节流的前因后果

本文链接：https://blog.csdn.net/Qian_mos/article/details/84646387

版权

前端专栏收录该内容

35 篇文章 1 订阅

订阅专栏

前因：窗口发生resize（窗口大小变化）、scroll、输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验很糟糕。
因果：为了减少事件处理函数的调用频率需要用到防抖和节流的方式。

函数防抖debounce
定义：多次触发事件后，事件处理函数只执行一次，即触发完事件n秒内（延迟时间）不再触发才执行该事件。
原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。一直到某次触发事件后在设定的延时内没有再次触发时，才会执行函数。
那么就有疑问了：若是频繁触发，岂不是要多次清除，多次重新定时？是的，所以每次都会生成定时器，只是若是上一次生成的定时器A还没有到时间，在此期间又触发了事件，后续产生的定时器B会把前面的定时器A清理掉。
代码：

// 计时器
var timer = false;
window.onscroll = function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
        console.log("防抖");
        console.log(new Date());
    },300);
};

函数节流throttle
定义：触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。
原理：持续触发事件，每隔一段时间只执行一次。
实现方式：1.使用时间戳；2.设置定时器
代码：

//设置一个标志位，表示是否可以进行定时器
var flag = true;
window.onscroll = function(){
    if(!flag) return false;
    flag = false;
    setTimeout(function(){
        console.log("节流" + new Date());
        flag = true;
    },300);
};