Wat is het verschil tussen debounce en throttle?

Question

Accepted Answer

Beide beperken hoe vaak een functie wordt uitgevoerd als reactie op snelle, herhaalde gebeurtenissen — maar met verschillende timingstrategieën.

- **Debounce**: voer de functie alleen uit **nadat de activiteit is gestopt** gedurende N ms. Reset de timer bij elke aanroep. → "wacht totdat het klaar is."
- **Throttle**: voer de functie **maximaal eenmaal per N ms** uit tijdens aanhoudende activiteit. → "voer uit met een constant tempo."

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

## Debounce-implementatie

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

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

## Wanneer welke gebruiken

- **Debounce**: zoeken-terwijl-u-typt, automatisch opslaan, einde-van-resize, validatie nadat de gebruiker stopt met typen — u wilt de *uiteindelijke* waarde.
- **Throttle**: scroll-handlers, mousemove, drag, rate-limiting — u wilt *periodieke* updates terwijl de actie plaatsvindt.

## Waarom het belangrijk is

Beiden voorkomen dat duur werk (API-aanroepen, herberekening van lay-out) honderden keren per seconde wordt uitgevoerd, wat een belangrijke front-end-prestatietechniek is.

Biblioteken zoals lodash bieden robuuste versies met leading/trailing-opties.