JS 如何实现防抖函数？

Question

JS 如何实现防抖函数？

仓乃文 · Accepted Answer

防抖（debounce）的核心思想是事件触发后等待一段时间再执行，如果在这段时间内事件再次触发则重新计时。适用于搜索框输入、窗口 resize 等高频场景。

基础实现：
```javascript
function debounce(fn, delay = 300) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);          // 每次触发都清除上一次的定时器
    timer = setTimeout(() => {
      fn.apply(this, args);      // 延迟结束后执行
    }, delay);
  };
}

// 使用示例
const handleSearch = debounce((keyword) => {
  console.log("搜索:", keyword);
}, 500);

input.addEventListener("input", (e) => handleSearch(e.target.value));
```

补充说明：
- 防抖适用于搜索框输入、表单验证等「停止操作后才执行」的场景
- 节流是「固定间隔执行」，防抖是「最后一次触发才执行」，两者适用场景不同
- 返回的函数要正确绑定 this 和传递参数
- 常见变体：首次立即执行版，在 delay 之前先执行一次