JS：函数节流（throttle）和防抖（debounce）

解决的问题

节流和防抖：为了限制函数的执行频次，以优化高频率触发函数导致的响应速度跟不上触发频率，出现延迟、假死或卡顿的现象。

主要用于对DOM Events的处理，常见场景：

• window对象的resize、scroll事件
• 拖拽时的mousemove事件
• 文字输入、自动完成的keyup事件等

防抖（debounce）

思想：当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作，则将重新计算执行时间。

缺点：如果一直触发，则函数一直不会被执行。

应用场景：搜索框输入实时触发搜索，或者window的resize等。

原理与实现：

如下图示，设定事件触发后等2格时间执行被防抖函数，可以看出不管事件连续触发多少次、持续多长时间，只要间隔始终小于2格，被防抖函数只会执行一次，即最后一次事件2格后执行。

简单版

每次都清除上一次的定时任务，开启一个新的执行任务。

const debounce = (fn, wait) => {
    let timer = null;
    return () => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn();
        }, wait);
    };
};

const log = () => { console.log(1); };

window.onscroll = debounce(log, 500); // 这个例子不太好，页面滚动一般用节流

实际应用中，有更多复杂的场景及优化点需考虑，如：

• 被防抖函数有传参；
• 不要每次都新建一个定时任务；
• 希望能在事件第一次被触发时执行（leading），忽略后面的连续触发等等。

Lodash版

//TODO

节流（throttle）

思想：预先设定一个执行周期，在任一个执行周期中，被节流函数最多执行一次。当调用动作的时刻距离上次执行的时间大于等于执行周期，则执行该动作，然后进入下一个新周期。

应用场景：监听页面滚动等。

简单版

const throttle = (fn, wait, time) => {
    let previous = null; // 记录上一次运行的时间
    let timer = null;
    return () => {
        let now = +new Date();
        if (!previous) previous = now;
        clearTimeOut(timer);
        // 若上一次执行时间与当前时间差大于预设的执行间隔，主动执行一次
        if (now - prvious > time) {
            fn();
            previous = now;
        } else {
            timer = setTimeout(function() {
                fn();
            }, wait);
        }
    };
};

const log = () => { console.log(1); };

window.onscroll = throttle(log, 500, 2000);

 

参考

《由浅入深学习lodash的debounce函数》

《函数节流与函数防抖》

《Debouncing and Throttling Explained Through Examples》