JavaScript之防抖和节流

参考资料

面试官：什么是防抖和节流？有什么区别？如何实现？ | web前端面试 - 面试官系列 (vue3js.cn)

JavaScript专题之跟着 underscore 学节流 · Issue #26 · mqyqingfeng/Blog (github.com)

throttle | Underscore.js 中文文档 | Underscore.js 中文网 (underscorejs.com.cn)

特别注意：从下面的代码，我们也可以的出JavaScript的各种事件是异步的，要不然，setTimeout也不可能执行。

为什么需要防抖和节流

本质上是优化高频率执行代码的一种手段

如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能

为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用throttle（防抖）和debounce（节流）的方式来减少调用频率

防抖

何为防抖？

在JavaScript中很多的事件，如果一个事件被触发后，它是n秒后结束才执行，如果在n秒内再次触发该时间，那么重新计时。也就是说，让事件再没有被触发的n秒后再处理。

为什么要使用防抖？

这是为了性能优化。

比如，我们对输入框的的手机号码验证，如果用户输入一次就验证一次，会降低性能，所以我们规定在用户停止输入后的n秒后，再去检查输入的手机号码是否合理。

窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

第一版代码

• 使用闭包，防止污染全局环境，也使得外部可以访问到该变量

const debounce = function(fun,delay){// fun就是回调函数
    let timeout;// 这里使用了闭包
    return function(){
        const context = this;// 保存this，当然也可以使用箭头函数
        clearTimeout(timeout);
        timeout = setTimeout(function(){
            fun.apply(context);// 如果这里不这样的话，那么this将指向window
        },delay);
    }
}

第二版代码

函数可能还会传递参数。比如event对象

const debounce = function(fun,delay){
    let timeout;// 这里使用了闭包
    let arg1 = arguments;// 传递给回调函数的参数
    return function(){
        const context = this;// 保存this，当然也可以使用箭头函数
        let arg2 = arguments;// 这就是event，由游览器传递，通常是最后一个参数
        clearTimeout(timeout);
        timeout = setTimeout(function(){
            fun.apply(context,...arg1,...arg2);// 如果这里不这样的话，那么this将指向window
        },delay);
    }
}

第三版代码

有些时候，我们想要第一次触发时就立即执行一次，然后等到停止触发 n 秒后，才可以重新触发执行(还是立即执行)。

const debounce = function (fun, delay, immediate) {
    let timeout; // 这里使用了闭包
    let arg1 = arguments; // 传递给回调函数的参数
    return function () {
        const context = this; // 保存this，当然也可以使用箭头函数
        let arg2 = arguments; // 这就是event，由游览器传递，通常是最后一个参数
        clearTimeout(timeout);

        if (immediate) {
            let callNow = !timeout;// 判断是否执行过，第一次会立即执行，等待n秒后，再次触发又会立即执行
            timeout = setTimeout(function(){
                timeout = null;
            },delay);
            if(callNow) fun.apply(context,...arg1, ...arg2)

        } else {// 不需要立即执行
            timeout = setTimeout(function () {
                fun.apply(context, ...arg1, ...arg2); // 如果这里不这样的话，那么this将指向window
            }, delay);
        }
    };
};

节流

何为节流？

n秒内只运行一次，若在 n 秒内重复触发，只有一次生效，它不会向防抖一样会重新计时。

为什么要使用节流？

这是为了性能优化。

搜索框，搜索联想功能

轮播图的节流，点击一次，只有等待动画结束后再次点击才有作用。

滚动加载，加载更多或滚到底部监听，在一定时间内只需要发送一次ajax请求，而不是有多少发送多少次。

总的来说就是为了防止重复的操作。

时间戳写法的节流代码

function throttle(fun,delay = 500){ // 单位是ms
    let oldtime = 0;// 这里必须设置为0，第一次才能立即执行
    let context;
    return function(){
        context = this;
        let now = Date.now();
        if(now - oldtime >= delay){
            fun.apply(context,...arguments); 
            oldtime = now;
        }
    }
}

优点：立即执行。

代码很简单，但是缺点也很明显。当停止触发后，之后无法在触发了，这是因为oldtime的原因。而且最后一次不会执行，因为一旦停止事件，now是不会更新的。

定时器写法的节流代码

function throttle(fun,delay = 500){ // 单位是ms
    let timer = null;
    let context;
    return function(){
        context = this;
        if(!timer){
            timer = setTimeout(()=>{
                fun.apply(context,...arguments);
                timer = null;
            },delay);
        }
    }
}

优点：可以二次触发，而且离开后的最后一次也会执行（定时器在管理）。缺点：不能立即触发。

两种写法合并在一起

function throttle(func, wait) {
    var timeout, context, args, result;
    var previous = 0;

    var later = function() {
        previous = +new Date();
        timeout = null;
        func.apply(context, args)
    };

    var throttled = function() {
        var now = +new Date();
        //下次触发func剩余的时间
        var remaining = wait - (now - previous);
        console.log(remaining);
        context = this;
        args = arguments;
         // 如果没有剩余的时间了或者你改了系统时间
        if (remaining <= 0) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;
}

区别

相同：

• 都可以通过使用 setTimeout 实现
• 目的都是，降低回调执行频率。节省计算资源

不同：

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。

防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。