Jaký je rozdíl mezi debounce a throttle?

Question

Accepted Answer

Oba limitují, jak často se funkce spustí v reakci na rychlé, opakované události — ale s různými strategiemi načasování.

- **Debounce**: spusť funkci pouze **poté, co činnost skončí** na N ms. Resetuje časovač při každém volání. → "čekej, dokud neskončí."
- **Throttle**: spusť funkci **nanejvýš jednou za N ms** během nepřetržité činnosti. → "běž v konstantní rychlosti."

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

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

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

## Kdy použít který

- **Debounce**: vyhledávání během psaní, automatické ukládání, konec změny velikosti, ověřování poté, co uživatel přestane psát — chceš **konečnou** hodnotu.
- **Throttle**: obsluha scrollování, mousemove, přetahování, omezování rychlosti — chceš **periodické** aktualizace během probíhající akce.

## Proč na tom záleží

Oba zabraňují spuštění nákladné práce (API volání, přepočet rozložení) stovky krát za sekundu, což je klíčová technika výkonu front-endu.