debounce 和 throttle 之间有什么区别？

Question

Accepted Answer

两者都限制函数响应快速、重复事件的运行频率——但采用不同的计时策略。

- **Debounce**: 仅在活动停止后 N ms **运行函数**。每次调用都重置计时器。→ "等到他们完成。"
- **Throttle**: 在持续活动期间**最多每 N ms 运行一次**函数。→ "以稳定速率运行。"

```text
events:    x x x x x x x ........ x x x
debounce:                 ↑ (fires once, after the pause)
throttle:  ↑     ↑     ↑           ↑     (fires periodically)
```

## Debounce 实现

```js
function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);                  // cancel the previous scheduled call
    timer = setTimeout(() => fn(...args), ms); // schedule a new one
  };
}
const search = debounce(q => api.search(q), 300); // only searches after typing pauses
```

## Throttle 实现

```js
function throttle(fn, ms) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= ms) { last = now; fn(...args); } // run at most every ms
  };
}
```

## 何时使用哪一个

- **Debounce**: search-as-you-type、autosave、resize-end、用户停止输入后的验证——你想要*最终*值。
- **Throttle**: scroll handlers、mousemove、drag、rate-limiting——你想要在动作进行时的*定期*更新。

## 为什么这很重要

两者都防止昂贵的操作（API 调用、布局重新计算）每秒运行数百次，这是关键的前端性能技术。

Lodash 等库提供具有 leading/trailing 选项的健壮版本。