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

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

回答：

可以通过定义一个返回函数的高阶函数来实现防抖。该函数利用闭包保存上一次的定时器，在每次调用时清除之前的定时器并重新设置新的延迟执行任务，从而只执行最后一次调用。

function debounce(func, delay) {
  let timer = null;
  return function (...args) {
    const context = this;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

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

解析：

• 防抖原理：当事件频繁触发时，只在最后一次触发后等待指定时间再执行回调，中间的触发都会被取消。
• debounce 函数接收两个参数：要执行的目标函数 func 和延迟时间 delay。
• 内部通过闭包变量 timer 保存 setTimeout 的引用，确保每次调用都能访问到同一个定时器。
• 使用 apply 保证原函数的 this 指向和参数正确传递。
• 常用于窗口滚动、输入框搜索、按钮重复点击等场景，有效减少不必要的计算或请求，提升性能。