如何在JavaScript中实现一个防抖（debounce）函数，以避免高频事件触发时的性能问题？

如何在JavaScript中实现一个防抖（debounce）函数，以避免高频事件触发时的性能问题？

回答：

可以通过定义一个返回函数的高阶函数来实现防抖。该函数会延迟执行目标函数，只有在最后一次触发后经过指定的等待时间才执行。

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func.apply(this, args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

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

解析：

1. debounce 函数接收两个参数：要防抖的函数 func 和延迟时间 wait。
2. 内部维护一个 timeout 变量，用于存储 setTimeout 的句柄。
3. 每次事件触发时，先清除之前的定时器（clearTimeout），然后重新设置一个新的定时器。
4. 只有当连续触发停止超过 wait 毫秒后，func 才会被真正执行一次。
5. 使用 apply(this, args) 确保原函数的 this 上下文和参数正确传递。

应用场景包括搜索框输入联想、窗口 resize、滚动事件等，可显著减少函数调用次数，提升性能。