Was ist der Unterschied zwischen Debounce und Throttle?

Du tippst „istanbul“ in ein Suchfeld. Acht Buchstaben, acht einzelne keyup-Events – und acht einzelne API-Anfragen. Der Nutzer hat einmal gesucht, aber du hast den Server achtmal abgefragt.

Die Rechnung

Multipliziere das mit zehntausend Nutzern: achtzigtausend Anfragen. Sechs von sieben davon landen im Müll, noch bevor die Antwort ankommt, weil der Nutzer weitergetippt hat.

Debounce: auf das letzte Event warten

Debounce setzt den Timer bei jedem Aufruf zurück. Kommt innerhalb der festgelegten Zeit (sagen wir 300 ms) kein neuer Auslöser, wird die letzte Anfrage genau einmal abgeschickt.

function debounce(fn, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}
 
const search = debounce((query) => fetch(`/api/search?q=${query}`));

Aus acht Tastenanschlägen wird eine einzige Anfrage, sobald der Nutzer aufhört zu tippen.

Throttle: in regelmäßigen Abständen auslösen

Throttle wartet nicht. Es erlaubt die Ausführung höchstens einmal innerhalb des festgelegten Intervalls (sagen wir 300 ms) und verschluckt alle Events, die dazwischen eintreffen.

function throttle(fn, interval = 300) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= interval) {
      last = now;
      fn(...args);
    }
  };
}

Debounce interessiert sich für das letzte Event, Throttle für den regelmäßigen Takt.

Was wann passt

Eine einfache Faustregel, damit du die beiden nicht verwechselst: Wenn du auf das Endergebnis warten kannst, nimm Debounce – Sucheingaben, Formularvalidierung, Autosave. Wenn du einen laufenden Strom von Events ausdünnen musst, nimm Throttle – Scroll-Listener, Fenstergrößenänderung, Mausbewegung.

Fazit

Für beides brauchst du keine Bibliothek; eine Funktion mit acht Zeilen reicht. Entscheidend ist nur, zu wissen, was wohin gehört.