2627函数防抖

白雪落青衣2024-11-28 13:47

请你编写一个函数，接收参数为另一个函数和一个以毫秒为单位的时间 t ，并返回该函数的函数防抖后的结果。

函数防抖方法是一个函数，它的执行被延迟了 t 毫秒，如果在这个时间窗口内再次调用它，它的执行将被取消。你编写的防抖函数也应该接收传递的参数。

例如，假设 t = 50ms ，函数分别在 30ms 、 60ms 和 100ms 时调用。前两个函数调用将被取消，第三个函数调用将在 150ms 执行。如果改为 t = 35ms ，则第一个调用将被取消，第二个调用将在 95ms 执行，第三个调用将在 135ms 执行。

复制代码

var debounce = function(fn, t) {
    let timeId = null; // 用于存储定时器的ID

    // 返回一个新的函数，这个新函数在被调用时会进行防抖处理
    return function(...args) {
        // 如果timeId不为null，说明有一个定时器正在运行，需要取消它
        if (timeId) clearTimeout(timeId);

        // 设置一个新的定时器，t毫秒后执行fn函数，并传入当前的所有参数
        timeId = setTimeout(() => fn(...args), t);
    }
};

性能考虑 ：防抖函数通过取消之前的定时器来确保函数不会在短时间内被多次调用。但是，如果防抖函数的调用非常频繁（比如在一个高速循环中），那么 clearTimeout 和 setTimeout 的调用也会成为性能瓶颈。在实际应用中，应该根据具体场景选择合适的防抖策略。
立即执行与延迟执行 ：标准的防抖函数（如您提供的实现）是延迟执行的，即函数只会在最后一次触发后的延迟时间 t 毫秒内没有新触发时才会执行。如果您希望函数在第一次触发时立即执行，并在之后的触发中遵循防抖逻辑，那么您需要对这个实现进行一些修改。
清除防抖 ：在某些情况下，您可能需要在组件卸载或事件监听器移除之前手动清除防抖函数。这通常涉及到保存防抖函数的返回值（即新函数）并在适当的时候调用 clearTimeout 来清除定时器。但是，在大多数情况下，如果组件或事件监听器被正确销毁，那么由它们触发的定时器通常也会被自动清除。