Qual è la differenza tra debounce e throttle?

Question

Accepted Answer

Entrambi limitano la frequenza con cui una funzione viene eseguita in risposta a eventi rapidi e ripetuti — ma con diverse strategie di temporizzazione.

- **Debounce**: esegui la funzione solo **dopo che l'attività si ferma** per N ms. Azzera il timer ad ogni chiamata. → "aspetta fino al termine."
- **Throttle**: esegui la funzione **al massimo una volta ogni N ms** durante l'attività continuativa. → "esegui a velocità costante."

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

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

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

## Quando usare quale

- **Debounce**: ricerca-mentre-digiti, autosave, resize-fine, validazione dopo che l'utente smette di digitare — vuoi il valore *finale*.
- **Throttle**: gestori scroll, mousemove, drag, rate-limiting — vuoi aggiornamenti *periodici* mentre l'azione è in corso.

## Perché è importante

Entrambi impediscono l'esecuzione di lavoro costoso (chiamate API, ricalcolo del layout) centinaia di volte al secondo, che è una tecnica chiave di prestazioni front-end.

Librerie come lodash forniscono versioni robuste con opzioni leading/trailing.