js防抖函数

在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 等频繁触发的事件。