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

Entprellen und Drosseln sind Möglichkeiten, Ziele aus einer Serie von Ereignissen für den Reduktionszweck auszuwählen. Beide benötigen eine Zeitperiode als Argument, zum Beispiel: x ms und die Sorte leading / tailing um zu definieren, wie Ereignisse auszuwählen sind.

Entprellen

Ein Ereignis auswählen, wenn in den nächsten x ms kein anderes Ereignis auftritt

"--->": Zeitachse

"o,c,e": Ereignisse, wobei 
"o" Ereignisse sind, die von "leading" ausgewählt wurden
"e" Ereignisse sind, die von "tailing" ausgewählt wurden
"c" sind übersprungene Ereignisse

"|===|": Zeitraum (x=5)

--oc-e-----occ-e----o-cc--ce-----o-c-cce------> Quellereignisse
  |===|    |===|    |===|        |===|
  ||===|   ||===|   | |===|      | |===|   
  |  |===| | |===|  |  |===|     |   |===|
  |      | |   |===||     |===|  |    |===|
  |      | |       ||      |===| |     |===|
--o--------o--------o------------o------------> ausgewählte Ereignisse (leading)
---------e---------e-----------e-----------e--> ausgewählte Ereignisse (tailing)

Drosseln

Ein Ereignis in jedem x ms auswählen, wenn ein Ereignis auftritt

--oc-e-----occ-e----o-ce--oe-----o-c-eoe------> Quellereignisse
  |===|    |===|    |===| |===|  |===||===|
--o--------o--------o-----o------o----o-------> ausgewählte Ereignisse (leading)
------e--------e--------e-----e------e----e---> ausgewählte Ereignisse (tailing)

Answer 2

Debouncing sorgt dafür, dass eine Funktion nur ausgeführt wird, nachdem eine bestimmte Zeit seit dem letzten Aufruf vergangen ist

function debounce(func, wait){
  let timeout
  return(...arg) =>{
    clearTimeout(timeout);
    timeout= setTimeout(()=>func.apply(this,arg),wait)
  }
}

function SayHello(){
  console.log("Jesus sagt hallo!!")
}

let x = debounce(SayHello,3000)
x()

Das Throttle-Muster begrenzt die maximale Anzahl von Aufrufen eines Ereignishandlers im Laufe der Zeit. Es lässt den Handler periodisch und in festgelegten Intervallen aufrufen und ignoriert jeden Aufruf, der vor Ablauf dieser Wartezeit erfolgt.

function throttle(callback, interval) {
  let enableCall = true;

  return (...args)=> {
    if (!enableCall) return;

    enableCall = false;
    callback.apply(this, args);
    setTimeout(() => enableCall = true, interval);
  }
}

function helloFromThrottle(){
  console.log("Jesus sagt hi!!!")
}

const foo = throttle(helloFromThrottle,5000)
foo()

Answer 3

Wie funktioniert Entprellen in der Hardware?

Entprellen ist der Prozess, mit dem Rauschen aus einem digitalen Signal entfernt wird. Wenn eine Taste gedrückt wird, kann das herumhüpfende Signal dazu führen, dass die Taste als mehrmals gedrückt registriert wird. Durch Entprellen wird dieses Rauschen entfernt, sodass die Taste nur einmal als gedrückt registriert wird. Stellen Sie sich ein Lineal vor, das an der Kante eines Schreibtisches abprallt, und stellen Sie sich vor, dass Metallkontakte in einem Schalter genauso abprallen.

Noch besser ist es, sich dieses Diagramm anzusehen, das das durch Abprallen verursachte Schalterrauschen zeigt.

Wir verwenden Widerstände und Kondensatoren mit richtig berechneten Werten, um das Signal für n ms zu glätten.

Erklären Sie, wie die Signalbegrenzung in der Hardware funktioniert.

Signalbegrenzung ist der Prozess, bei dem die Anzahl der Registrierungen eines Signals begrenzt wird. Dies wird oft verwendet, um zu verhindern, dass eine Taste in kurzer Zeit mehrmals als gedrückt registriert wird.

Ich bevorzuge den Begriff Gate, aber das liegt daran, dass ich in die Produktion elektronischer Musik involviert bin.

Wir öffnen das Tor am Ende jeder Begrenzungsperiode und lassen das Signal passieren, und schließen dann das Tor wieder für die nächste Begrenzungsperiode.

Erklären Sie, wie das Entprellen in der Software funktioniert.

Entprellen in der Software wird oft durch Verwendung eines Timers erreicht. Wenn die Taste gedrückt wird, wird der Timer gestartet. Wenn die Taste erneut gedrückt wird, bevor der Timer abläuft, wird der Timer zurückgesetzt. Dadurch wird sichergestellt, dass die Taste nur einmal pro Entprellzeitraum als gedrückt registriert wird.

In vielen Implementierungen des Entprellens erstellen wir eine entprellte Version der Funktion, die in einem Closure mit einem Timer (oder Gate) eingebettet ist. Wenn die Timer-Verzögerung abläuft, setzen wir sie wieder auf null. Die eigentliche Funktion wird nur ausgeführt, wenn der Timer null ist. Normalerweise bedeutet dies, dass die entprellte Funktion bei ihrem ersten Aufruf einmal ausgeführt wird, und nachfolgende Aufrufe werden effektiv abgebrochen, bis die Verzögerungszeit verstrichen ist.

In einigen Implementierungen des Entprellens wird der Timer bei einer Folge von Aufrufen neu gestartet und der Timer noch nicht abgelaufen ist. Die Funktion wird erst aufgerufen, nachdem das Springen gestoppt hat. Dies wird normalerweise als trailing debounce bezeichnet.

Erklären Sie, wie die Begrenzung in der Software funktioniert.

Die Begrenzung in der Software wird oft durch Verwendung eines Zählers erreicht. Wenn die Taste gedrückt wird, wird der Zähler inkrementiert. Wenn die Taste erneut gedrückt wird, bevor der Zähler einen bestimmten Schwellenwert erreicht, wird der Zähler zurückgesetzt. Dadurch wird die Anzahl der Registrierungen der Taste in einem bestimmten Zeitraum begrenzt. Es ist gut, sich dies als Impuls oder Beat vorzustellen, der ein Tor öffnet und schließt, während Anrufe an die Begrenzung gesendet werden.

Beschränkung der Geschwindigkeit ist eine weitere Möglichkeit, eine Begrenzung zu betrachten.

Warum ist dies eine so häufige Ursache für Verwirrung?

In vielen Anwendungsfällen führen Entprellen oder Begrenzen zu den gewünschten Ergebnissen, insbesondere wenn die von Ihnen verwendete Softwareimplementierung es Ihnen ermöglicht, Ihre Begrenzung oder Ihr Entprellen zu verketten, zu verzögern oder zu führen.

Dennoch hoffe ich, dass alle Antworten hier und hier Ihnen geholfen haben, klarer zu verstehen.

Sie sind sich sehr ähnlich.

Answer 4

Debouncing und Throttling in Javascript

Beide Funktionen dienen dazu, die Rate zu verzögern oder zu begrenzen, mit der einige Funktionen ausgeführt werden. Dies hilft wiederum bei der Optimierung unserer Web-Apps.

Was ist ein Throttling?

• Beim Throttling wird die Funktion innerhalb einer festgelegten Zeit ausgelöst.
• Die erste Anforderung wird durchgelassen.
• Die ursprüngliche Funktion wird nur einmal innerhalb eines festgelegten Zeitraums ausgeführt

Beispiel: Das folgende Bild zeigt die Klick-Ereignisse, die in einem Intervall/Verzögerung von 40 ms ausgelöst werden. Die Ereignisse e2, e3 und e4 fanden innerhalb von 40 ms statt und wurden daher nicht ausgeführt.

Code für Throttling:

const trottle = function (fn, d) {
  let flag = true;        // um das erste Ereignis durchzulassen

  return function () {
    if (flag) {
      fn();              // die dekorative Funktion ausführen
      flag = false;      // die nächsten ausgelösten Ereignisse blockieren
      setTimeout(() => {
        flag = true;     // die nächsten ausgelösten Ereignisse nach einer festgelegten Verzögerung freigeben
      }, d);
    }
  };
};

Eine Throttling-Funktion wird häufig bei Größenänderungs- oder Scrollereignissen verwendet.

Was ist Debouncing?

• Debouncing ist eine Methode, mit der verhindert wird, dass die Funktion aufgerufen wird, wenn sie erst kürzlich aufgerufen wurde.
• Nur die letzte Anforderung wird durchgelassen.
• Die ursprüngliche Funktion wird nur ausgeführt, wenn der Aufrufer aufhört, die dekorierte Funktion für die festgelegte Zeit aufzurufen.

Beispiel: Das folgende Bild zeigt die Klickereignisse, die erst nach einer Verzögerung (100 ms) ausgeführt werden,

Die Ereignisse e1, e2, e3 und e4 wurden vom Benutzer ausgelöst, wurden jedoch nicht erfolgreich ausgeführt, weil das aufeinanderfolgende Ereignis innerhalb von 100 ms auftrat. (Verzögerung zwischen e1 und e2 < 100 ms oder e2 und e3 < 100 ms usw.) Ereignis e4 ruft die dekorierte Funktion erfolgreich auf, weil nach seiner Auslösung durch den Benutzer eine Verzögerung von 100 ms besteht. Code für Debouncing:

const debounce = function (fn, d) {
  let timer;

  return function () {
    clearTimeout(timer);           // den Timer löschen/zurücksetzen, wenn das Ereignis innerhalb der Verzögerung ausgelöst wird
    timer = setTimeout(() => {     // die Funktion ausführen
      fn();
    }, d);
  };
};

Eine Debouncing-Funktion wird häufig verwendet, um das Tippen (in Eingabefeldern) oder Klickereignisse zu begrenzen.

Debouncing und Throttling in Aktion:

Denouncing vs. Throttling Hier können Sie den Unterschied visuell erkennen

Unterlagen:

https://www.geeksforgeeks.org/javascript-throttling/ https://www.geeksforgeeks.org/debouncing-in-javascript/

Unterschied zwischen Throttling und Debouncing einer Funktion

https://www.youtube.com/watch?v=TBIEArmPywU

Answer 5

Meines Verständnisses nach kann man 'Throttling' in einfachen Worten wie folgt erklären: Ähnlich wie setInterval(callback) wird eine bestimmte Anzahl von Aufrufen getätigt, sprich die gleiche Funktion wird über einen bestimmten Zeitraum hinweg auf das Eintreten eines Ereignisses hin aufgerufen. Und.. 'Debouncing' lässt sich ähnlich erklären wie das Aufrufen von setTimeout(callbackForApi) oder das Aufrufen einer Funktion nach einer bestimmten Zeitdauer nach dem Eintreten eines Ereignisses. Dieser Link könnte hilfreich sein- https://css-tricks.com/the-difference-between-throttling-and-debouncing/