如何在JavaScript中实现一个防抖（debounce）函数，并解释其工作原理？

如何在JavaScript中实现一个防抖（debounce）函数，并解释其工作原理？

回答： 可以通过以下代码实现一个防抖函数：

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    // 每次触发时清除之前的定时器
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    // 设置新的定时器，延迟执行函数
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

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

解析：

• 防抖的含义：防抖是指当高频事件连续触发时，只在最后一次触发后等待一定时间再执行对应函数，避免函数被频繁调用。
• 实现逻辑：
  1. debounce 函数接收两个参数：要执行的函数 func 和延迟时间 delay。
  2. 返回一个包装后的函数，在该函数内部维护一个 timeoutId 变量用于保存 setTimeout 的句柄。
  3. 每次调用该包装函数时，都会先清除之前的定时器（clearTimeout），然后重新设置一个新的定时器。
  4. 只有当用户停止触发事件超过 delay 时间后，才会真正执行 func。
• 应用场景：常用于搜索框输入联想、窗口 resize、滚动事件等高频触发场景，以提升性能和减少不必要的请求。
• 注意点：使用 apply(this, args) 是为了保持原函数的 this 上下文和参数传递。