搞清楚节流和防抖

节流（throttle）和防抖（debounce）是前端面试中非常高频的一道面试题，在实际项目开发中，也有很多实用场景，最后一次梳理这两个概念。

节流

规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效。

就像一个水龙头在滴水，可能一次性会滴很多滴，但是我们只希望它每隔 1000ms 滴一滴水，保持这个频率，即我们希望函数在以一个固定的频率重复调用；因此这个方法比较适合应用于动画相关的场景。

原理

原理是通过判断是否到达规定时间来触发函数。

运用场景

• 鼠标不断点击触发，mousedown 事件的执行(单位时间内只触发一次)
• 监听滚动事件，比如是否滑到底部自动加载更多，用节流来判断

代码实现

function throttle(fun, delay) {
    let last, 
        timer;
    return function () {
        let self = this,
            args = arguments,
            now = +new Date();

        if (last && now < last + delay) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fun.apply(self, args);
            }, delay);
        } else {
            last = now;
            fun.apply(self, args);
        }
    }
}
// 没秒执行一次
const myEvent = throttle(function() {
    console.log('开始执行...');
}, 1000);

document.querySelector('input').addEventListener('keyup', myEvent);
复制代码

防抖

当持续触发事件时，一定时间段内没有再次触发事件，事件处理函数才会执行一次，如果在设定的时间到来之前，又一次触发了事件，就重新开始延时。

想象你将一个弹簧按下，继续加压，继续按下，只会在你最后放手的时候反弹，即我们希望函数只会调用一次，即使在这之前反复调用它，最终也只会调用一次而已。

原理

其原理是维护一个计时器，规定在 delay 时间后触发函数，但是在 delay 时间内再次触发的话，就会取消之前的计时器而重新设置；这样一来，只有最后一次操作能被触发。

运用场景

• input 输入框实现模糊匹配功能，用户在不断输入值时，用防抖来节约请求资源
• window 触发 resize 的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

代码实现

以实现一个简易的模糊匹配功能为例：

function debounce(func, delay) {
    let timer;
    return function (e) {
        clearTimeout(timer);
        const self = this;
        const args = arguments;
        
        timer = setTimeout(function () {
            func.apply(self, args);
        }, delay)
    };
};
// 最后一次事件触发完成后，1秒后才执行函数
const myEvent = debounce(function (e) {
    console.log('开始请求数据...')
}, 1000);

// 绑定监听
document.querySelector("input").addEventListener('input', myEvent);
复制代码

总结

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

• 参考资料：节流与防抖可视化
• 参考资料：函数防抖与函数节流
• 参考资料：7分钟理解JS的节流、防抖及使用场景