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

解决的问题

---

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

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

• window对象的scroll事件
• 文字输入、自动完成的keyup事件等

防抖（debounce）

---

思路

当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作，则将重新计算执行时间。
如下图示，设定事件触发后等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); // 这个例子不太好，页面滚动一般用节流

节流（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》