如何在JavaScript中实现一个防抖（debounce）函数，以避免频繁触发事件处理程序？

如何在JavaScript中实现一个防抖（debounce）函数，以避免频繁触发事件处理程序？

回答：

可以通过定义一个闭包函数来实现防抖，该函数返回一个新函数，在指定的延迟时间内如果没有再次调用，则执行原函数。以下是一个典型的防抖函数实现：

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    // 保存 this 上下文和参数
    const context = this;
    // 每次调用时清除之前的定时器
    clearTimeout(timeoutId);
    // 设置新的定时器
    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

// 使用示例：
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function (e) {
  console.log('搜索关键词:', e.target.value);
}, 300));

解析：

1. 闭包机制：debounce 函数内部定义了 timeoutId，通过闭包被返回的函数持久持有，确保每次调用都能访问到同一个变量。
2. 清除定时器：每次函数被调用时，都会清除之前的 setTimeout，防止之前未执行的操作被执行。
3. 延迟执行：只有当用户停止触发事件超过 delay 毫秒后，func 才会被真正执行。
4. 上下文与参数保留：使用 apply(context, args) 保证原函数的 this 指向和参数正确传递。

应用场景包括搜索框输入联想、窗口大小调整（resize）、滚动事件等高频触发但只需响应最后一次操作的场景。