防抖

10次阅读

共计 734 个字符,预计需要花费 2 分钟才能阅读完成。

防抖的中心思想在于:我会等你到底。在某段时间内,不管你触发了多少次回调,我都只认最后一次。
继续讲司机开车的故事。这次的司机比较有耐心。第一个乘客上车后,司机开始计时(比如说十分钟)。十分钟之内,如果又上来了一个乘客,司机会把计时器清零,重新开始等另一个十分钟(延迟了等待)。直到有这么一位乘客,从他上车开始,后续十分钟都没有新乘客上车,司机会认为确实没有人需要搭这趟车了,才会把车开走。
我们对比 throttle 来理解 debounce:在 throttle 的逻辑里,“第一个人说了算”,它只为第一个乘客计时,时间到了就执行回调。而 debounce 认为,“最后一个人说了算”,debounce 会为每一个新乘客设定新的定时器。
我们基于上面的理解,一起来写一个 debounce:
// fn 是我们要包装的回调函数事件,delay 每次等待都执行时间 function debounce(fn, delay) {
// 定时器;
let timer = null;

return function() {
// 保存上下文的 this
let context = this
// 保存传入的参数
let args = arguments;
// 每次调用前都清空定时器
if (timer) {
clearTimeout(timer)
}
// 去设立一个新的定时器
timer = setTimeout (function() {
fn.apply(context, args);
}, delay)
}
}// 用 throttle 来包装 scroll 的回调 let better_scroll = debounce(() => {console.log(‘ 触发了滚动事件 ’), 1000});document.addEventListener(‘scroll’, better_scroll);

正文完
 0