Unterschied zwischen Drosseln und Entprellen einer Funktion

Kann mir jemand in einfachen Worten eine Erklärung über den Unterschied zwischen Drosselung und Entprellung einer Funktion zur Geschwindigkeitsbegrenzung geben?

Für mich scheinen beide das Gleiche zu tun. Ich habe diese beiden Blogs überprüft, um herauszufinden:

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

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

Einfach ausgedrückt:

• Durch das Drosseln wird die Ausführung einer Funktion verzögert. Dadurch werden die Benachrichtigungen eines Ereignisses reduziert, das mehrmals ausgelöst wird.
• Beim Entprellen werden eine Reihe von aufeinanderfolgenden Aufrufen einer Funktion zu einem einzigen Aufruf dieser Funktion zusammengefasst. Es stellt sicher, dass eine Benachrichtigung für ein Ereignis erfolgt, das mehrmals ausgelöst wird.

Sie können den Unterschied hier visuell sehen

Wenn Sie eine Funktion haben, die häufig aufgerufen wird, z. B. wenn ein Größenänderungs- oder Mausbewegungsereignis auftritt, kann diese häufig aufgerufen werden. Wenn Sie dieses Verhalten nicht möchten, können Sie es drosseln , sodass die Funktion in regelmäßigen Abständen aufgerufen wird. Das Entprellen bedeutet, dass es am Ende (oder am Anfang) einer Reihe von Ereignissen aufgerufen wird.

Ich persönlich fand debounce schwerer zu begreifen als Drossel .

Da beide Funktionen Ihnen helfen, die Ausführungsrate zu verschieben und zu reduzieren. Angenommen, Sie rufen dekorierte Funktionen auf, die wiederholt durch Gasgeben / Entprellen zurückgegeben werden ...

• Gas : Die ursprüngliche Funktion darf höchstens einmal pro angegebenem Zeitraum aufgerufen werden.
• Entprellen : Die ursprüngliche Funktion wird aufgerufen, nachdem der Aufrufer nach einer bestimmten Zeit den Aufruf der dekorierten Funktion beendet hat .

Ich fand den letzten Teil der Entprellung entscheidend, um das Ziel zu verstehen, das damit erreicht werden soll. Ich fand auch eine alte Version der Implementierung von _.debounce, die das Verständnis erleichtert (mit freundlicher Genehmigung von https://davidwalsh.name/function-debounce ).

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

Eine weit hergeholte Metapher, könnte aber vielleicht auch helfen.

Sie haben einen Freund namens Chatty, der gerne über IM mit Ihnen spricht. Angenommen, wenn sie spricht, sendet sie alle 5 Sekunden eine neue Nachricht, während Ihr IM-Anwendungssymbol auf und ab springt, können Sie die ...

• Naiver Ansatz: Überprüfen Sie jede Nachricht, solange sie eintrifft. Wenn Ihr App-Symbol springt, überprüfen Sie. Es ist nicht der effektivste Weg, aber Sie sind immer auf dem neuesten Stand.
• Gasannahme : Sie überprüfen einmal alle 5 Minuten (wenn es neue gibt). Wenn eine neue Nachricht eintrifft und Sie sie in den letzten 5 Minuten jederzeit überprüft haben, ignorieren Sie sie. Mit diesem Ansatz sparen Sie Zeit, während Sie noch auf dem Laufenden sind.
• Debounce- Ansatz: Sie wissen, Chatty, sie zerlegt eine ganze Geschichte in Stücke und sendet sie in einer Nachricht nach der anderen. Sie warten, bis Chatty die ganze Geschichte beendet hat: Wenn sie 5 Minuten lang keine Nachrichten mehr sendet, würden Sie annehmen, dass sie fertig ist. Jetzt überprüfen Sie alle.

Unterschiede

+--------------+-------------------+-------------------+
|              |  Throttle 1 sec   |  Debounce 1 sec   |
+--------------+-------------------+-------------------+
| Delay        | no delay          | 1 sec delay       |
|              |                   |                   |
| Emits new if | last was emitted  | there is no input |
|              | before 1 sec      |  in last 1 sec    |
+--------------+-------------------+-------------------+

Erläuterung nach Anwendungsfall :

• Suchleiste - Sie möchten nicht jedes Mal suchen, wenn der Benutzer die Taste drückt? Möchten Sie suchen, wenn der Benutzer 1 Sekunde lang nicht mehr tippt? Verwenden Sie debounce1 Sek. Beim Tastendruck.

• Schießspiel - Die Pistole benötigt zwischen jedem Schuss 1 Sekunde, aber der Benutzer klickt mehrmals mit der Maus. Verwenden Sie throttlebei Mausklick.

Umkehren ihrer Rollen :

• Drosselung 1 Sek. In der Suchleiste - Wenn Benutzer abcdefghijmit jedem Zeichen eingeben0.6 sec . Dann wird beim ersten aDrücken der Gashebel ausgelöst . Es wird jedes Drücken für die nächsten 1 Sek. Ignoriert, dh bbei 0,6 Sek. Wird ignoriert. Dann wird cnach 1,2 Sekunden erneut ausgelöst, wodurch die Zeit erneut zurückgesetzt wird. So dwerden ignoriert und ewird ausgelöst werden.

• Entprallen der Pistole für 1 Sek. - Wenn der Benutzer einen Feind sieht, klickt er mit der Maus, aber er schießt nicht. Er wird in dieser Sekunde mehrmals klicken, aber es wird nicht schießen. Er wird sehen, ob es noch Kugeln gibt. Zu diesem Zeitpunkt (1 Sek. Nach dem letzten Klick) wird die Pistole automatisch abgefeuert.

Durch die Drosselung wird erzwungen, wie oft eine Funktion im Laufe der Zeit maximal aufgerufen werden kann. Wie in "Führen Sie diese Funktion höchstens einmal alle 100 Millisekunden aus."

Durch das Entprellen wird erzwungen, dass eine Funktion erst nach einer bestimmten Zeit erneut aufgerufen wird, ohne dass sie aufgerufen wird. Wie in "Führen Sie diese Funktion nur aus, wenn 100 Millisekunden vergangen sind, ohne dass sie aufgerufen wurde."

ref

Gas (1 Sek.): Hallo, ich bin ein Roboter. Solange du mich anrufst, werde ich weiter mit dir reden, aber nach jeweils genau 1 Sekunde. Wenn Sie mich vor Ablauf einer Sekunde um eine Antwort bitten, werde ich Ihnen weiterhin in einem Intervall von genau 1 Sekunde antworten. Mit anderen Worten, ich antworte einfach gerne in genauen Intervallen.

Debounce (1 Sek.): Hallo, ich bin der Cousin dieses Roboters. Solange du mich anrufst, werde ich schweigen, weil ich nur antworten möchte, nachdem 1 Sekunde vergangen ist, seit du mich das letzte Mal angerufen hast . Ich weiß nicht, ob es daran liegt, dass ich ein Einstellungsproblem habe oder einfach nicht gerne Leute unterbreche. Mit anderen Worten, wenn Sie mich immer wieder um Antworten bitten, bevor 1 Sekunde seit Ihrem letzten Aufruf verstrichen ist, erhalten Sie nie eine Antwort. Yeah yeah ... mach weiter! Nenn mich unhöflich.

Gas (10 min): Ich bin ein Holzfäller. Ich sende Systemprotokolle nach einem regulären Intervall von 10 Minuten an unseren Backend-Server.

Debounce (10 Sek.): Hallo, ich bin kein Cousin dieses Holzfällers. (Nicht jeder Debouncer ist mit einem Throttler in dieser imaginären Welt verwandt). Ich arbeite als Kellner in einem nahe gelegenen Restaurant. Ich sollte Sie wissen lassen, dass ich nicht zur Ausführung Ihrer Bestellung in die Küche gehen werde, solange Sie Ihrer Bestellung etwas hinzufügen. Erst wenn 10 Sekunden vergangen sind, nachdem Sie Ihre Bestellung zuletzt geändert haben, gehe ich davon aus, dass Sie mit Ihrer Bestellung fertig sind. Erst dann werde ich Ihre Bestellung in der Küche ausführen.

Coole Demos: https://css-tricks.com/debouncing-throttling-explained-examples/

Credits für die Kellner-Analogie: https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

Mit dem Entprellen können Sie die Häufigkeit von Anrufen verwalten, die eine Funktion empfangen kann. Es kombiniert mehrere Aufrufe, die für eine bestimmte Funktion ausgeführt werden, sodass wiederholte Aufrufe, die vor Ablauf einer bestimmten Zeitdauer erfolgen, ignoriert werden. Grundsätzlich stellt das Entprellen sicher, dass genau ein Signal für ein Ereignis gesendet wird, das möglicherweise mehrmals auftritt.

Durch die Drosselung wird die Häufigkeit von Anrufen, die eine Funktion empfängt, auf ein festes Zeitintervall beschränkt. Es wird verwendet, um sicherzustellen, dass die Zielfunktion nicht öfter als die angegebene Verzögerung aufgerufen wird. Drosselung ist die Verringerung der Rate eines sich wiederholenden Ereignisses.

Es ist einfach.

Sie machen die genau die gleiche Sache (Rate Limiting) , außer während Drossel genannt wird , es wird in regelmäßigen Abständen Ihre gewickelte Funktion ausgelöst, und debounce nicht. Debounce ruft (versucht) Ihre Funktion nur einmal ganz am Ende auf.

Beispiel : Wenn Sie scrollen, ruft Gas Ihre Funktion langsam auf, während Sie scrollen (alle X Millisekunden). Debounce wartet, bis Sie mit dem Scrollen fertig sind, um Ihre Funktion aufzurufen.

In Laienbegriffen:

Durch das Entprellen wird verhindert, dass eine Funktion ausgeführt wird, während sie noch häufig aufgerufen wird. Eine entprellte Funktion wird erst ausgeführt, nachdem festgestellt wurde, dass sie nicht mehr aufgerufen wird. Zu diesem Zeitpunkt wird sie genau einmal ausgeführt. Praktische Beispiele für das Entprellen:

• Automatisches Speichern oder Überprüfen des Inhalts eines Textfelds, wenn der Benutzer "aufgehört hat zu tippen": Der Vorgang wird nur einmal ausgeführt, nachdem festgestellt wurde, dass der Benutzer nicht mehr tippt (keine Tasten mehr drückt).

• Protokollierung, bei der Benutzer ihre Maus ausruhen: Der Benutzer bewegt seine Maus nicht mehr, sodass die (letzte) Position protokolliert werden kann.

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

• Implementierungen von v-sync basieren auf Drosselung: Der Bildschirm wird nur gezeichnet, wenn seit der letzten Bildschirmzeichnung 16 ms vergangen sind. Unabhängig davon, wie oft die Bildschirmaktualisierungsfunktion aufgerufen wird, wird sie höchstens alle 16 ms ausgeführt.

Eine echte Analogie, die mir persönlich hilft, mich zu erinnern:

• entprellen = ein Gespräch . Sie warten, bis die andere Person mit dem Sprechen fertig ist, bevor Sie antworten.
• Gas = ein Trommelstück . Sie spielen Noten nur auf einem einfachen 4/4-Drum-Bit.

Anwendungsfälle für das Entprellen :

• Tippen. Sie möchten etwas tun, nachdem der Benutzer aufgehört hat zu tippen. Es macht also Sinn, 1 Sekunde nach dem letzten Tastendruck zu warten. Jeder Tastendruck startet das Warten neu.
• Animation. Sie möchten ein Element verkleinern, nachdem der Benutzer nicht mehr darüber schwebt. Wenn Debounce nicht verwendet wird, kann dies zu einer fehlerhaften Animation führen, da sich der Cursor unbeabsichtigt zwischen den Zonen "heiß" und "kalt" bewegt.

Anwendungsfälle für Gas :

• Scrollen. Sie möchten auf das Scrollen reagieren, aber die Anzahl der durchgeführten Berechnungen begrenzen. Daher reicht es aus, alle 100 ms etwas zu tun, um mögliche Verzögerungen zu vermeiden.
• Maus bewegen. Wie Scrollen, jedoch zum Bewegen der Maus.
• API-Aufrufe Sie möchten einen API-Aufruf für bestimmte UI-Ereignisse auslösen, aber die Anzahl der API-Aufrufe begrenzen, die Sie ausführen, um Ihren Server nicht zu überlasten.

throtle ist nur ein Wrapper um das Debounce, bei dem das Debounce für einen Anruf functionin einem bestimmten Zeitraum übergeben wird, wenn das Debounce einen Funktionsaufruf auf einen Zeitraum verzögert, der größer ist als in throtle angegeben .

Die lodash Library schlägt den folgenden Artikel vor: https://css-tricks.com/debouncing-throttling-explained-examples/, in dem der Unterschied zwischen Debounceund Throttleund ihrer Entstehung ausführlich erläutert wird

Drosselung

Durch die Drosselung wird eine maximale Anzahl von Überstunden einer Funktion erzwungen. Wie in "Führen Sie diese Funktion höchstens einmal alle 100 Millisekunden aus." Angenommen, Sie würden diese Funktion unter normalen Umständen innerhalb von 10 Sekunden 1.000 Mal aufrufen. Wenn Sie es nur einmal pro 100 Millisekunden drosseln, wird diese Funktion höchstens 100 Mal ausgeführt

(10s * 1,000) = 10,000ms
10,000ms / 100ms throttling = 100 maximum calls

Entprellen

Durch das Entprellen wird erzwungen, dass eine Funktion erst nach einer bestimmten Zeit erneut aufgerufen wird, ohne dass sie aufgerufen wird. Wie in "Führen Sie diese Funktion nur aus, wenn 100 Millisekunden vergangen sind, ohne dass sie aufgerufen wurde."

Möglicherweise wird eine Funktion in einem schnellen Burst 1.000 Mal aufgerufen, über 3 Sekunden verteilt und dann nicht mehr aufgerufen. Wenn Sie es nach 100 Millisekunden entprellt haben, wird die Funktion nur einmal nach 3,1 Sekunden ausgelöst, sobald der Burst beendet ist. Jedes Mal, wenn die Funktion während des Bursts aufgerufen wird, wird der Entprellungszeitgeber zurückgesetzt

Quelle: - Gas und Entprellen

Angenommen, wir haben eine Rückruffunktion "cb", die bei Ereignis "E" aufgerufen werden soll. Lassen Sie "E" 1000 Mal in 1 Sekunde ausgelöst werden, daher würde es 1000 Aufrufe von "cb" geben. Das ist 1 Anruf / ms. Zur Optimierung können wir entweder verwenden:

• Drosselung : Bei einer Drosselung von (100 ms) wird "cb" auf [100. ms, 200. ms, 300. ms, ... 1000. ms] aufgerufen. Das ist 1 Anruf / 100 ms. Hier sind 1000 Anrufe an "cb" auf 10 Anrufe optimiert.
• Entprellen : Bei einem Entprellen von (100 ms) wird "cb" am [1100. Sek.] Nur einmal aufgerufen. Das ist 100 ms nach dem letzten Trigger von "E", der am [1000. ms] passiert ist. Hier sind 1000 Anrufe an "cb" auf 1 Anruf optimiert.

Soweit ich weiß, in einfachen Worten Throttling - ähnlich wie das Aufrufen von setInterval (Rückruf) für eine bestimmte Anzahl von Malen, dh das Aufrufen derselben Funktion für eine bestimmte Anzahl von Malen im Laufe der Zeit beim Auftreten eines Ereignisses und .. Debouncing - ähnlich wie das Aufrufen von setTImeout (callbackForApi) oder Aufrufen einer Funktion nach Ablauf einer bestimmten Zeit beim Auftreten eines Ereignisses. Dieser Link kann hilfreich sein - https://css-tricks.com/the-difference-between-throttling-and-debouncing/