Unterschied zwischen Drosselung und Entprellung einer Funktion

Question

Kann mir jemand eine einfache Erklärung über den Unterschied zwischen Throttling und Debouncing einer Funktion für Zwecke der Rate-Begrenzung geben?

Für mich scheinen beide dasselbe zu tun. Ich habe diese zwei Blogs überprüft, um herauszufinden, aber ich habe immer noch Schwierigkeiten zu verstehen.

http://remysharp.com/2010/07/21/throttling-function-calls

http://benalman.com/projects/jquery-throttle-debounce-plugin/

Answer 1

Es ist einfacher als die Demos.

Wenn throttle aufgerufen wird, wird Ihre Funktion regelmäßig ausgeführt (z.B. alle 20 ms) - und am Ende einmal.

Debounce wird nur am Ende ausgeführt (z.B. 20 ms nach dem letzten Ereignis).

Solange Ereignisse weiterhin schnell auftreten (z.B. in Intervallen von weniger als 20 ms), wird debounce schweigen, während throttle alle 20 ms einmal ausführen wird. Beide werden am Ende ausgeführt, der Unterschied besteht nur darin, dass throttle auch zwischendurch in festgelegten Intervallen ausgeführt wird.

Beispiel: Wenn Sie scrollen, wird throttle langsam Ihre Funktion aufrufen, während Sie scrollen (alle X Millisekunden). Debounce wird warten, bis Sie mit dem Scrollen fertig sind, um Ihre Funktion aufzurufen (möglicherweise nur einmal).

---

Ich denke gerne an throttle als "einschließlich debounce", beide rufen am Ende die Funktionen auf, wenn die Ereignisse abgeschlossen sind, aber aufgrund von Implementierungsdetails rufen die beiden nicht immer genau zum gleichen Zeitpunkt auf, was Demos verwirrend macht.

Answer 2

Auf Deutsch ausgedrückt:

Entprellen verhindert, dass eine Funktion ausgeführt wird, während sie häufig aufgerufen wird. Eine entprellte Funktion wird nur nachdem festgestellt wurde, dass sie nicht mehr aufgerufen wird, ausgeführt, und dann wird sie genau einmal ausgeführt. Praktische Beispiele für Entprellen:

• Automatisches Speichern oder Validieren des Inhalts eines Textfelds, wenn der Benutzer "mit dem Tippen aufgehört hat": die Operation wird nur einmal durchgeführt, NACHDEM festgestellt wurde, dass der Benutzer nicht mehr tippt (keine Tasten mehr drückt).

• Protokollieren, wo Benutzer ihre Maus ablegen: Der Benutzer bewegt seine Maus nicht mehr, daher kann die (letzte) Position protokolliert werden.

Throttling verhindert einfach, dass eine Funktion ausgeführt wird, wenn sie kürzlich ausgeführt wurde, unabhängig von der Aufrufrate. Praktische Beispiele für Throttling:

• Umsetzungen von V-Sync basieren auf Throttling: Der Bildschirm wird nur gezeichnet, wenn seit dem letzten Bildschirmzeichnen 16ms vergangen sind. Egal wie oft die Bildschirmaktualisierungsfunktion aufgerufen wird, sie wird höchstens einmal alle 16ms ausgeführt.

Answer 3

Ein realistisches Analogon, das mir persönlich hilft, es zu merken:

• Debounce = ein Gespräch. Du wartest, bis die andere Person mit Sprechen fertig ist, bevor du antwortest.
• Throttle = ein Schlagzeugrhythmus. Du spielst nur Noten auf einem einfachen 4/4 Drum-Rhythmus.

Beispielanwendungen für Debounce:

• Tippen. Du möchtest etwas tun, nachdem der Benutzer mit dem Tippen aufgehört hat. Daher macht es Sinn, 1 Sekunde nach dem letzten Tastendruck zu warten. Jeder Tastendruck startet das Warten neu.
• Animation. Du möchtest ein Element wieder verkleinern, nachdem der Benutzer aufgehört hat, darüber zu schweben. Wenn du Debounce nicht verwendest, kann dies zu einer erratischen Animation führen, weil der Cursor unabsichtlich zwischen den "heißen" und "kalten" Zonen hin- und herwandert.

Beispielanwendungen für Throttle:

• Scrollen. Du möchtest auf das Scrollen reagieren, aber die Anzahl der Berechnungen begrenzen, sodass es ausreicht, alle 100 ms etwas zu tun, um mögliche Verzögerungen zu verhindern.
• Mausbewegung. Das gleiche wie beim Scrollen, nur für die Mausbewegung.
• API-Aufrufe. Du möchtest einen API-Aufruf bei bestimmten UI-Ereignissen auslösen, aber die Anzahl der API-Aufrufe begrenzen, um deinen Server nicht zu überlasten.

Answer 4

Ein Bild sagt mehr als tausend Worte

Throttle

Debounce

Beachte, dass das Debounce erst ausgelöst wird, wenn der Event-Flow stoppt. Throttle hingegen wird in bestimmten Intervallen ausgelöst.

(Dank an css-tricks)

Answer 5

Debouncing ermöglicht es Ihnen, die Häufigkeit von Aufrufen zu steuern, die eine Funktion erhalten kann. Es kombiniert mehrere Aufrufe, die auf einer bestimmten Funktion erfolgen, so dass wiederholte Aufrufe, die vor dem Ablauf einer bestimmten Zeitdauer erfolgen, ignoriert werden. Im Grunde genommen stellt Debouncing sicher, dass genau ein Signal für ein Ereignis gesendet wird, das sich möglicherweise mehrmals ereignet.

Throttling beschränkt die Häufigkeit von Aufrufen, die eine Funktion in einem festen Zeitintervall erhält. Es wird verwendet, um sicherzustellen, dass die Ziel-Funktion nicht öfter aufgerufen wird als die angegebene Verzögerung. Throttling ist die Reduzierung der Rate eines wiederkehrenden Ereignisses.