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

Um es einfach auszudrücken:

• Throttling verzögert die Ausführung einer Funktion. Es reduziert die Benachrichtigungen eines Ereignisses, das mehrmals ausgelöst wird.
• Debouncing fasst eine Reihe aufeinanderfolgender Aufrufe einer Funktion in einen einzigen Aufruf dieser Funktion zusammen. Es gewährleistet, dass eine Benachrichtigung für ein Ereignis erfolgt, das mehrmals ausgelöst wird.

Sie können den Unterschied visuell sehen in diesem Demo, das zeigt, wann ein gedämpftes vs. gedrosseltes Ereignis aufgrund von Mausbewegungen ausgelöst werden würde.

Wenn Sie eine Funktion haben, die häufig aufgerufen wird - zum Beispiel, wenn eine Größenänderung oder eine Mausbewegung stattfindet, kann sie viele Male aufgerufen werden. Wenn Sie dieses Verhalten nicht möchten, können Sie es drosseln, damit die Funktion in regelmäßigen Abständen aufgerufen wird. Debouncing bedeutet, dass sie am Ende (oder am Anfang) einer Gruppe von Ereignissen aufgerufen wird.

Answer 2

Persönlich fand ich debounce schwieriger zu verstehen als throttle.

Da beide Funktionen Ihnen helfen, die Ausführung zu verschieben und die Rate einer Ausführung zu reduzieren. Angenommen, Sie rufen die von throttle/debounce zurückgegebenen dekorierten Funktionen wiederholt auf...

• Throttle: Die Originalfunktion wird höchstens einmal pro angegebener Zeitspanne aufgerufen.
• Debounce: Die Originalfunktion wird aufgerufen, nachdem der Aufrufer aufgehört hat, die dekorierte Funktion nach einer festgelegten Zeitspanne aufzurufen.

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

// Gibt eine Funktion zurück, die solange aufgerufen wird, wie sie fortlaufend aufgerufen wird, nicht
// ausgelöst wird. Die Funktion wird aufgerufen, nachdem sie N Millisekunden lang nicht mehr aufgerufen wurde. Wenn `immediate` übergeben wird, wird die Funktion am
// vorderen Rand ausgelöst, anstatt am hinteren Rand.
_.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);
  };
};

Vielleicht eine weit hergeholte Metapher, aber könnte auch helfen.

Sie haben eine Freundin namens Schwätzchen, die 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 das...

• Naive Herangehensweise: Überprüfen Sie jede Nachricht, solange sie ankommt. Wenn Ihr App-Symbol springt, überprüfen Sie es. Es ist nicht der effektivste Weg, aber Sie sind immer auf dem neuesten Stand.
• Throttle Ansatz: Sie überprüfen einmal alle 5 Minuten (wenn neue eintreffen). Wenn eine neue Nachricht ankommt, ignorieren Sie sie, wenn Sie in den letzten 5 Minuten überprüft haben. Mit diesem Ansatz sparen Sie Zeit, während Sie immer noch informiert bleiben.
• Debounce Ansatz: Sie kennen Schwätzchen, sie zerlegt eine ganze Geschichte in Stücke und sendet sie einer nach dem anderen. Sie warten, bis Schwätzchen die ganze Geschichte beendet hat: Wenn sie für 5 Minuten aufhört, Nachrichten zu senden, nehmen Sie an, dass sie fertig ist, und überprüfen dann alle.

Answer 3

Unterschiede

Throttle 1 Sek.

Debounce 1 Sek.

Verzögerung

Keine Verzögerung

1 Sekunde Verzögerung

Gibt neue Daten aus, wenn...

1 Sekunde vergangen ist
seit der letzten Ausgabe

Nach der letzten Eingabe,
sind die folgenden 1 Sekunde ohne neue Eingabe

Erklärung anhand von Anwendungsfällen

• Suchleiste: Möchten Sie nicht bei jedem Tastendruck des Benutzers suchen? Möchten Sie stattdessen suchen, nachdem der Benutzer für 1 Sekunde aufgehört hat zu tippen? Verwenden Sie debounce 1 Sekunde bei Tastendruck.

• Schießspiel: Die Pistole benötigt zwischen jedem Schuss 1 Sekunde Zeit, aber der Benutzer klickt mehrmals innerhalb von 1 Sekunde auf die Maus. Die Verwendung von throttle bei Mausklicks stellt sicher, dass die zu früh erfolgten Klicks ignoriert werden.

Vertauschen ihrer Rollen

• Throttling 1 Sekunde auf der Suchleiste: Wenn ein Benutzer "abcdefghij" eingibt, wobei jeder nachfolgende Buchstabe alle 0,6 Sekunden eingegeben wird, wird throttle bereits beim ersten Druck auf "a" ausgelöst. Er ignoriert dann jeden weiteren Druck für die nächsten 1 Sekunde; d.h. der Druck auf "b" nach 0,6 Sekunden wird ignoriert. Dann wird bei "c" nach 1,2 Sekunden erneut eine Suche ausgelöst, die dann die Zeit wieder zurücksetzt, und so weiter für die folgenden Buchstaben (z. B. "d" nach 1,8 Sekunden wird ignoriert, aber "e" nach 2,4 Sekunden wird ausgelöst, usw.).

• Debouncing der Pistole für 1 Sekunde: Wenn ein Benutzer einen Feind sieht, klickt er auf die Maus, aber sie schießt nicht. Er klickt mehrmals in dieser Sekunde, aber sie schießt immer noch nicht. Erst nachdem er seine Klicks für eine volle Sekunde eingestellt hat, wird die Pistole endlich feuern, nur einen einzigen Schuss.

Ein "Real-Life" Vergleich

Vor einer Bar stehen einige Wachen. Die Wachen lassen eine Person, die sagt "Ich möchte reingehen", in die Bar. Dies ist ein normaler Fall. Jeder, der sagt "Ich möchte reingehen", darf in die Bar.

Jetzt gibt es einen Throttle-Wächter (throttle 5 Sekunden). Er mag Leute, die am schnellsten reagieren. Jeder, der zuerst sagt "Ich werde reingehen", lässt er hinein. Danach weist er jede Person in den nächsten 5 Sekunden ab. Danach wird wieder jeder, der es als Erster sagt, reingelassen und andere werden für die nächsten 5 Sekunden abgelehnt.

Es gibt einen weiteren Wächter, den Debounce-Wächter (debounce 5 Sekunden). Er mag Leute, die ihm mentale Ruhe für 5 Sekunden bringen. Wenn also jemand sagt "Ich werde reingehen", wartet der Wächter 5 Sekunden. Wenn ihn in diesen 5 Sekunden niemand stört, lässt er die erste Person hinein. Aber wenn jemand anderes dazwischenkommt und in diesen 5 Sekunden sagt "Ich werde reingehen", lehnt er den ersten ab und startet wieder die 5 Sekunden des Wartens, diesmal für die zweite Person. Wenn jetzt 5 Sekunden ohne Unterbrechung verstreichen, wird diese zweite Person eingelassen, aber nicht die erste.

Answer 4

Drossel (1 Sekunde): Hallo, ich bin ein Roboter. Solange du mich weiterhin anpingst, werde ich mit dir reden, aber immer genau nach 1 Sekunde. Wenn du mich vor Ablauf einer Sekunde anpingst, antworte ich trotzdem genau im Abstand von 1 Sekunde. Mit anderen Worten, ich liebe es, in exakten Intervallen zu antworten.

Entprellen (1 Sekunde): Hi, ich bin der Cousin von dem Roboter da oben. Solange du mich weiterhin anpingst, bleibe ich still, weil ich erst nach 1 Sekunde seit deinem letzten Anpingen antworte. Ich weiß nicht, ob es daran liegt, dass ich eine Einstellungsfrage habe oder weil ich es einfach nicht mag, Leute zu unterbrechen. Mit anderen Worten, wenn du mich um Antworten bittest, bevor seit deinem letzten Aufruf 1 Sekunde vergangen ist, wirst du nie eine Antwort erhalten. Ja ja... nenn mich ruhig unhöflich.

---

Drossel (10 Minuten): Ich bin eine Protokollierungsmaschine. Ich sende Systemprotokolle an unseren Backend-Server in regelmäßigen Abständen von 10 Minuten.

Entprellen (10 Sekunden): Hallo, ich bin nicht der Cousin davon Protokollierungsmaschine (Nicht jeder Entpreller ist in dieser imaginären Welt mit einem Drossel verwandt). Ich arbeite als Kellner in einem nahegelegenen Restaurant. Ich sollte erwähnen, dass solange du Dinge zu deiner Bestellung hinzufügst, werde ich nicht in die Küche gehen, um deine Bestellung auszuführen. Nur wenn 10 Sekunden vergangen sind nachdem du deine Bestellung zuletzt geändert hast, werde ich annehmen, dass du mit deiner Bestellung fertig bist. Erst dann werde ich deine Bestellung in der Küche ausführen.

---

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

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

Answer 5

Drosselung setzt eine maximale Anzahl von Aufrufen einer Funktion über einen bestimmten Zeitraum hinweg durch. Zum Beispiel "Diese Funktion höchstens alle 100 Millisekunden ausführen."

Entprellung gewährleistet, dass eine Funktion erst nach einer bestimmten Zeitspanne erneut aufgerufen wird, ohne dass sie aufgerufen wurde. Zum Beispiel "Diese Funktion nur ausführen, wenn 100 Millisekunden vergangen sind, ohne dass sie aufgerufen wurde."

ref