Care este diferența dintre debounce și throttle?

Question

Accepted Answer

Amândouă limitează cât de des se execută o funcție în răspuns la evenimente rapide și repetate — dar cu strategii de timing diferite.

- **Debounce**: execută funcția doar **după ce activitatea se oprește** pentru N ms. Resetează timerul la fiecare apel. → "așteptați până se termină."
- **Throttle**: execută funcția **cel mult o dată la N ms** în timpul activității continue. → "executați la o viteză constantă."

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

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

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

## Când să folosiți care

- **Debounce**: căutare pe măsură ce scrieți, autosave, sfârşit redimensionare, validare după ce utilizatorul se oprește din scris — doriți *valoarea finală*.
- **Throttle**: handleri de scroll, mousemove, drag, rate-limiting — doriți *actualizări periodice* în timp ce acțiunea este în desfășurare.

## De ce este important

Ambele împiedică executarea unei lucrări scumpe (apeluri API, recalcularea layout-ului) de sute de ori pe secundă, care este o tehnică cheie de performanță front-end.

Biblioteci precum lodash oferă versiuni robuste cu opțiuni leading/trailing.