Koja je razlika između debounce i throttle?

Question

Accepted Answer

Oboje ograničavaju kako često se funkcija izvršava kao odgovor na brze, ponovljene događaje — ali s različitim vremenskim strategijama.

- **Debounce**: izvršite funkciju samo **nakon što aktivnost prestane** N ms. Resetirajte timer na svakom pozivu. → "čekaj dok nisu gotovi."
- **Throttle**: izvršite funkciju **najviše jednom svakih N ms** tijekom kontinuirane aktivnosti. → "izvršavaj steady ratom."

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

## Debounce implementacija

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

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

## Kada koristiti koju

- **Debounce**: pretraga-dok-pišete, autosave, resize-kraj, validacija nakon što korisnik prestane pisati — trebate *konačnu* vrijednost.
- **Throttle**: scroll handleri, mousemove, drag, ograničavanje stope — trebate *periodične* ažurnje tijekom trajanja akcije.

## Zašto je to važno

Oboje sprječavaju pokretanje skupe obrade (API pozivi, recalculation rasporeda) stotine puta u sekundi, što je ključna tehnika performansi front-enda.

Biblioteke poput lodash-a pružaju robusne verzije s opcijama leading/trailing.