Mi a különbség a debounce és a throttle között?

Question

Accepted Answer

Mindkettő korlátozza, hogy egy függvény milyen gyakran futjon le gyors, ismételt események válaszaként — de különböző időzítési stratégiákkal.

- **Debounce**: futtassa a függvényt csak **miután a tevékenység N ms-re megáll**. Az időzítő a minden híváskor visszaáll. → "vár, amíg kész nem lesz."
- **Throttle**: futtassa a függvényt **legfeljebb N ms-enként** folyamatos tevékenység során. → "futtasd stabil sebességgel."

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

## Debounce implementáció

```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 implementáció

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

## Mikor melyiket használja

- **Debounce**: keresés-miközben-gépelsz, autosave, resize-befejezés, validálás miután a felhasználó abbahagyja a gépelést — az *utolsó* értéket akarod.
- **Throttle**: scroll kezelők, mousemove, drag, sebességhatárolás — *periodikus* frissítéseket akarsz a művelet alatt.

## Miért fontos

Mindkettő megakadályozza, hogy drága műveletek (API hívások, elrendezés újraszámítása) másodpercenként százszor lefussanak, amely a front-end teljesítmény kulcsfontosságú technikája.

Az olyan kódtárak, mint a lodash, robusztus verziókat biztosítanak leading/trailing opcióval.