Debounce und Throttle

Kurz: Debounce und Throttle begrenzen, wie oft eine Funktion bei sehr häufigen Ereignissen (Tippen, Scrollen, Größe ändern) ausgeführt wird.

Genauer: Beim Debounce wird die Funktion erst ausgeführt, wenn eine Pause eintritt, zum Beispiel 300 ms nach dem letzten Tastendruck. Beim Throttle läuft sie höchstens einmal pro Zeitraum, zum Beispiel alle 100 ms, egal wie viele Ereignisse kommen.

Im Detail

• Debounce-Beispiel: Suchvorschläge erst abrufen, wenn der Nutzer kurz aufhört zu tippen.
• Throttle-Beispiel: Scroll-Handler für eine Fortschrittsanzeige höchstens alle 100 ms.
• Faustregel: Debounce, wenn nur das Endergebnis zählt. Throttle, wenn laufende Zwischenstände wichtig sind.
• Umsetzung: Ein Timer wird bei jedem Ereignis zurückgesetzt (Debounce) oder ein Zeitstempel verglichen (Throttle).
• Alternative: requestAnimationFrame für Animationen, damit höchstens einmal pro Bild gezeichnet wird.

Siehe auch: Event Loop (Ereignisschleife)