搞清楚节流和防抖

节流(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的节流、防抖及使用场景

你可能感兴趣的:(搞清楚节流和防抖)