Debounce vs. Throttle, visualisiert

Debounce-vs.-Throttle-Visualisierer

Debounce vs. Throttle in JavaScript, visualisiert | We.Inc

Bewege den Zeiger über das Feld und sieh rohe Events, Debounce-Aufrufe und Throttle-Aufrufe auf einer gemeinsamen Zeitleiste. Mit kopierbaren Debounce- und Throttle-Funktionen sowie React-Hooks.

Debounce wartet, bis die Aufrufe für eine festgelegte Zeit aufhören, und läuft dann einmal. Das passt zu Suchfeldern und automatischem Speichern. Throttle läuft höchstens einmal pro Intervall, solange weiter Aufrufe kommen. Das passt zu Scrollen, Größenänderungen und Zeigerverfolgung. Beide nehmen eine Funktion und eine Verzögerung in Millisekunden entgegen und geben eine umhüllte Funktion zurück, die du stattdessen aufrufst.

Was du wann verwendest

Situation
Verwenden
Warum

Suche beim Tippen
Debounce, etwa 300 ms
Eine Anfrage, nachdem die Person pausiert

Formular automatisch speichern
Debounce, etwa 1000 ms
Einmal speichern, sobald das Tippen zur Ruhe kommt

Scrollposition oder Fortschrittsbalken
Throttle, etwa 100 ms
Regelmäßige Updates während des Scrollens

Layoutberechnung bei Fenstergrößenänderung
Throttle oder Debounce
Throttle für Live-Feedback, Debounce für die endgültige Größe

Doppelte Klicks beim Absenden verhindern
Debounce mit Leading Edge
Der erste Klick zählt, Wiederholungen werden ignoriert

Die beiden Begriffe werden oft verwechselt, weil beide reduzieren, wie oft eine Funktion läuft. Das Feld unten zeigt den Unterschied auf einer gemeinsamen Zeitleiste: jedes rohe Event als dünner Strich, jeder Debounce-Aufruf und jeder Throttle-Aufruf als Punkt. Ändere die Verzögerung, und das Muster ändert sich mit.

Bewege den Zeiger oder Finger über das Feld oder halte eine Taste gedrückt, während es den Fokus hat.
Rohe Events füllen die obere Spur. Die mittlere Spur zeigt Debounce-Aufrufe, die untere Throttle-Aufrufe.
Ziehe den Verzögerungsregler und wiederhole den Vorgang, um zu sehen, wie der Abstand beide Muster verändert.
Kopiere die einfachen Funktionen oder die React-Hooks unten für deinen eigenen Code.

Erstelle die Debounce-Funktion nur einmal. Eine neue bei jedem React-Render setzt ihren Timer zurück, sodass sie nie auslöst.
Brich ausstehende Aufrufe ab, wenn eine Komponente unmountet, sonst aktualisiert ein später Aufruf womöglich etwas, das nicht mehr existiert.
Für Animationen, die ans Scrollen gekoppelt sind, ist requestAnimationFrame oft besser als ein festes Throttle-Intervall.
Wende Debounce auf den teuren Teil an, etwa die Netzwerkanfrage, nicht auf den eigenen State des Eingabefelds, sonst fühlt sich das Tippen träge an.

Häufige Fragen

Was ist der Unterschied zwischen Debounce und Throttle?

Debounce startet seinen Timer bei jedem Aufruf neu und läuft erst, wenn die Aufrufe pausieren. Throttle ignoriert Aufrufe im aktuellen Zeitfenster, läuft aber wieder, sobald das Fenster vorbei ist. So löst es während einer langen Serie gleichmäßig aus.

Was sind Leading und Trailing Edge?

Die Leading Edge ist der erste Aufruf einer Serie, die Trailing Edge der Moment, in dem das Intervall der Serie endet. Ein Trailing-Debounce läuft nach der Pause, ein Leading-Debounce läuft sofort und ignoriert dann Aufrufe bis zur Pause. Throttles können an einer der beiden Kanten oder an beiden auslösen.

Brauche ich lodash für Debounce?

Nein. Die Funktionen auf dieser Seite bestehen jeweils aus wenigen Zeilen. Eine Bibliotheksversion bietet Optionen wie maxWait, cancel und flush. Die sind praktisch, aber leicht selbst zu ergänzen, wenn du nur eine davon brauchst.

Wie lang sollte die Verzögerung sein?

Es gibt nicht den einen richtigen Wert. Beginne mit etwa 300 Millisekunden fürs Tippen und 100 für Scrollen oder Zeigerbewegungen und passe dann nach Gefühl an. Kürzer fühlt sich reaktionsschneller an, spart aber weniger Arbeit.

So funktioniert Debounce

Jeder Aufruf löscht den ausstehenden Timer und startet einen neuen. Erst wenn der Timer die volle Verzögerung übersteht, läuft die ursprüngliche Funktion, und zwar mit den Argumenten des letzten Aufrufs.
Damit ist Debounce ideal, wenn es um die Absicht geht: Dich interessiert nicht jeder Tastenanschlag, sondern nur das Wort, das jemand fertig getippt hat. Der Preis ist Latenz, denn bis zur Pause passiert nichts.

So funktioniert Throttle

Ein Throttle merkt sich, wann er zuletzt gelaufen ist. Ein Aufruf innerhalb des Intervalls wird verworfen oder in der Trailing-Variante gespeichert, um am Ende des Intervalls zu laufen. Aufrufe außerhalb des Intervalls laufen sofort.
Nutze ihn, wenn Nutzer laufend Feedback sehen sollen, etwa ein Sticky Header, der aufs Scrollen reagiert, ein Lauf bei jedem Event aber Verschwendung wäre.

Versionen in reinem JavaScript

debounce(fn, wait)

Trailing Edge. cancel() verwirft einen ausstehenden Aufruf.

throttle(fn, wait)

Läuft an der Leading Edge und dann noch einmal am Ende des Fensters, falls inzwischen Aufrufe kamen. So geht der letzte Wert nie verloren.

React-Hooks

useDebouncedCallback

Behält einen Timer für die gesamte Lebensdauer der Komponente, ruft immer den neuesten Callback auf und löscht den Timer beim Unmount.

useThrottledValue

Gibt eine Kopie eines sich schnell ändernden Werts zurück, die sich höchstens einmal pro Intervall aktualisiert.

Rohe Events

Debounce ({n} ms)

Throttle ({n} ms)

Visualisierer

Bewege dich über das Feld. Dünne Striche sind rohe Events, Punkte sind Aufrufe, die nach Debounce oder Throttle tatsächlich gelaufen sind.

Verzögerung: {n} ms

Event-Feld: Zeiger hier bewegen oder eine Taste halten

Hier bewegen (oder fokussieren und eine Taste halten)

Die Zeitleiste zeigt die letzten sechs Sekunden, die Zahlen zählen die Aufrufe in diesem Zeitraum.