В чем разница между debounce и throttle?

Question

Accepted Answer

Обе техники ограничивают частоту выполнения функции в ответ на быстрые, повторяющиеся события — но используют разные стратегии синхронизации.

- **Debounce**: выполнить функцию только **после остановки активности** на N мс. Сбросить таймер при каждом вызове. → "подождите, пока закончится."
- **Throttle**: выполнить функцию **не более одного раза в N мс** при непрерывной активности. → "выполнять с постоянной частотой."

```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**: поиск по мере ввода, автосохранение, конец изменения размера, валидация после остановки ввода пользователем — вам нужно *финальное* значение.
- **Throttle**: обработчики прокрутки, mousemove, drag, ограничение частоты — вам нужны *периодические* обновления во время выполнения действия.

## Почему это важно

Обе техники предотвращают выполнение дорогостоящих операций (вызовы API, пересчет макета) сотни раз в секунду, что является ключевой техникой оптимизации производительности front-end.

Библиотеки вроде lodash предоставляют надежные версии с опциями leading/trailing.