Kakšna je razlika med debounce in throttle?

Question

Accepted Answer

Oba omejujeta, kako pogosto se funkcija izvršuje kot odgovor na hitre, ponavljajoče se dogodke — vendar z različnimi strategijami časovanja.

- **Debounce**: izvršite funkcijo samo **potem, ko se dejavnost ustavi** za N ms. Ponastavite timer ob vsakem klicu. → "počakajte, da se končajo."
- **Throttle**: izvršite funkcijo **največ enkrat na N ms** med neprekinjeno dejavnostjo. → "izvršujte s stalno hitrostjo."

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

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

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

## Kdaj uporabiti katero

- **Debounce**: iskanje med pisanjem, avtomatski shrani, konec spremembe velikosti, preverjanje po tem, ko se je uporabnik nehal pisati — želite si *končno* vrednost.
- **Throttle**: upravljalniki scroll, mousemove, drag, omejevanje stopnje — želite si *periodične* posodobitve med trajanjem dejanja.

## Zakaj je to pomembno

Obe preprečujeta izvajanje dragocene funkcionalnosti (API klici, ponovno izračunavanje postavitve) stokrat na sekundo, kar je ključna tehnika optimizacije front-end zmogljivosti.

Biblioteke, kot je lodash, nudijo robustne različice z možnostmi leading/trailing.