实现一个函数 debounce(fn, delay)，对函数进行防抖处理

推荐答案

// www.javascriptcn.com code example
function debounce(fn, delay) {
    let timer = null;
    return function(...args) {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

本题详细解读

1. 防抖的概念

防抖（Debounce）是一种优化高频触发事件的技术。它的核心思想是：在事件被触发后，延迟一段时间再执行回调函数。如果在延迟时间内事件再次被触发，则重新计时。这样可以确保在短时间内多次触发的事件只执行一次回调。

2. 代码解析

• timer 变量：用于存储定时器的 ID，初始值为 null。
• 返回的函数：这是一个闭包，捕获了 timer 变量。每次调用返回的函数时，都会检查 timer 是否存在。
  • 如果 timer 存在，说明之前已经设置了一个定时器，此时调用 clearTimeout(timer) 清除之前的定时器。
  • 然后重新设置一个新的定时器，延迟 delay 毫秒后执行 fn.apply(this, args)。
• fn.apply(this, args)：确保回调函数 fn 在正确的上下文（this）中执行，并传递正确的参数（args）。

3. 使用场景

防抖常用于处理用户输入、窗口调整大小、滚动等高频触发的事件。例如，在搜索框中，用户输入时可能会频繁触发 input 事件，使用防抖可以确保只在用户停止输入后才发起搜索请求。

4. 示例

const onResize = debounce(() => {
    console.log('Window resized!');
}, 300);

window.addEventListener('resize', onResize);

在这个例子中，onResize 函数会在窗口调整大小后 300 毫秒内如果没有再次调整大小，才会执行 console.log('Window resized!')。