Was ist der Unterschied zwischen debounce und throttle?

Question

Accepted Answer

Beide begrenzen, wie oft eine Funktion als Reaktion auf schnelle, wiederholte Events ausgeführt wird — aber mit unterschiedlichen Timing-Strategien.

- **Debounce**: Führe die Funktion nur **nach dem Ende der Aktivität** für N ms aus. Setzt den Timer bei jedem Aufruf zurück. → "warten, bis es vorbei ist."
- **Throttle**: Führe die Funktion **höchstens einmal pro N ms** während kontinuierlicher Aktivität aus. → "laufen mit konstanter Geschwindigkeit."

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

## Debounce-Implementierung

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

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

## Wann welche zu verwenden ist

- **Debounce**: Suche beim Tippen, Autosave, Größenänderung-Ende, Validierung nachdem der Benutzer aufhört zu tippen — du möchtest den **finalen** Wert.
- **Throttle**: Scroll-Handler, mousemove, Ziehen, Ratenlimitierung — du möchtest **periodische** Updates während die Aktion läuft.

## Warum es wichtig ist

Beide verhindern, dass teure Arbeiten (API-Aufrufe, Layout-Neuberechnung) hunderte Male pro Sekunde ausgeführt werden, was eine wichtige Frontend-Performance-Technik ist.