在js中,我们通常需要对用户频繁操作进行防抖处理(如频繁点击按钮),以减少性能开销
实现代码:
/**
* @param {Function} fn
* @param {number} t milliseconds
* @return {Function}
*/
var debounce = function(fn, t) {
let time
return function(...args) {
clearTimeout(time)
time = setTimeout(()=>fn(...args),t)
}
};
/**
* const log = debounce(console.log, 100);
* log('Hello'); // cancelled
* log('Hello'); // cancelled
* log('Hello'); // Logged at t=100ms
*/
实现原理:
函数接受两个参数:
1. `fn`:要执行的函数,也称为回调函数。
2. `t`:防抖的时间间隔,单位是毫秒。
函数返回一个新的函数,这个新函数会在被调用时执行防抖逻辑。
防抖逻辑的原理如下:
1. 使用闭包保存一个 `time` 变量,用于记录上一次调用 `fn` 的时间戳。
2. 当新函数被调用时,首先通过 `clearTimeout` 清除之前设置的定时器,确保只有一个定时器在生效。
3. 然后通过 `setTimeout` 设置一个新的定时器,延迟 `t` 毫秒后执行一个回调函数。
4. 这个回调函数会调用传入的 `fn` 函数,并传入之前保存的参数 `args`。
5. 如果在 `t` 毫秒内再次调用了新函数,会再次清除之前的定时器并设置一个新的定时器,延迟 `t` 毫秒后再次执行回调函数,从而实现防抖的效果。
这样,当连续触发事件时,只有在最后一次触发后的 `t` 毫秒内没有再次触发,才会真正执行一次 `fn` 函数,从而减少了频繁执行回调函数的次数,优化了性能。防抖常常用于处理输入框输入、窗口 resize 等频繁触发的事件。