Jaka jest różnica między debounce a throttle?

Question

Accepted Answer

Oba ograniczają, jak często funkcja jest wykonywana w odpowiedzi na szybkie, powtarzające się zdarzenia — ale z różnymi strategiami czasowymi.

- **Debounce**: uruchom funkcję tylko **po zatrzymaniu aktywności** na N ms. Resetuj timer przy każdym wywołaniu. → "czekaj, aż skończy."
- **Throttle**: uruchom funkcję **co najwyżej raz na N ms** podczas ciągłej aktywności. → "uruchom ze stałą częstotliwością."

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

## Dlaczego to ważne

```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
```

## Implementacja 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
  };
}
```

## Kiedy użyć której

- **Debounce**: wyszukiwanie podczas pisania, autosave, koniec zmiany rozmiaru, walidacja po zatrzymaniu pisania użytkownika — chcesz *ostatecznej* wartości.
- **Throttle**: handlery scroll, mousemove, drag, rate-limiting — chcesz *okresowych* aktualizacji podczas trwającej akcji.

## Dlaczego to ważne

Oba zapobiegają uruchamianiu kosztownych operacji (wywołania API, przeliczanie layoutu) setki razy na sekundę, co jest kluczową techniką optymalizacji front-endu.

Biblioteki takie jak lodash zapewniają solidne wersje z opcjami leading/trailing.