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

Einfaches Konzept für Throttle ist das häufige Klicken auf die Schaltfläche "Senden" in einem Formular, wir müssen Throttle verwenden. So wird verhindert, dass die Sendefunktion häufig geklickt wird. Es speichert die gleichen Anfragen, die an die Funktion übergeben werden.

Und zu Debounce, schreiben Sie einen einfachen Code mit einem Eingabetextfeld zum Suchen einiger Daten vom Server. Bei Eingabe verwenden Sie das Debounce, um die vorherigen Anfragen zu entfernen und das zuletzt eingegebene Wort an den Server zu übergeben.

const throttle = (callback, time = 0) => {
    let throttle_req, count = 0;
     return async function () {
         var context = this, args = arguments;  
         if(throttle_req) return;  
         throttle_req = true; 
         if(time > 0)
         {
             callback.apply(context, args); 
             setTimeout(() => {
              throttle_req = false; 
             }, time || 200) 
         }
         else
         {
           let response = await callback.apply(context, args); 
            throttle_req = false; 
           return response;
         } 
     }
  }
const debounce = (callback, time = 0) => {
    let debounce_req;
    return function () {
        var context = this, args = arguments;
        clearTimeout(debounce_req) 
        debounce_req = setTimeout(() => {
             debounce_req = null;
             callback.apply(context, args);
        }, time || 200) 
    }
}

Wie man es aufruft: Wickeln Sie einfach Ihre Funktion mit Throttle oder Debounce ein, um den Unterschied zu überprüfen

Throttle Bsp .: mehrmals auf dieselbe Schaltfläche klicken

var throttleFunct = throttle(function(num) {
  console.log(num, "Hallo Throttle")
}, 2000);
throttleFunct(300) // es wird ausgeführt, da es der erste Aufruf ist
throttleFunct(400) // es wird nicht ausgeführt

Throttle async ohne Zeit

var getDataAsync =  throttle(function(id, name) {
    return new Promise((resolve) => {  
      setTimeout(() => {
            resolve({name: name, id: id})
      }, 2000)
     }) 
});
async function test() {
let response = await getDataAsync(120, 'Sherley').then(resp => resp)  
console.log(response, "antworten") // es wird ausgeführt, da es der erste Aufruf ist
response = await getDataAsync(120, 'James').then(resp => resp)  
console.log(response, "antworten2")// es wird 2 nach dem ersten Aufruf ausgeführt
response = await getDataAsync(120, 'Jonathan').then(resp => resp)  
console.log(response, "antworten3")// es wird 3 nach dem zweiten Aufruf ausgeführt
    }
    test()

Debounce z. B .: Autocomplete für die Suchfeldsuche

var debounceFunct = debounce(function(num) {
  console.log(num+1)
}, 2000);
debounceFunct(300) // es wird nicht ausgeführt und abgebrochen
debounceFunct(400) // es wird ausgeführt und durch den vorherigen Aufruf ersetzt. weil dies das neueste Event ist

Answer 2

Was hier wirklich zählt, in einfachsten Worten: Wenn Sie eine Aktion haben, die kontinuierlich für einen bestimmten Zeitraum wiederholt wird (wie Mausbewegungen oder Seitenvergrößerungsereignisse), und Sie müssen eine Funktion als Reaktion ausführen, aber Sie möchten nicht auf jede Aktion reagieren (weil dies die Leistung beeinträchtigen kann), haben Sie 2 Optionen:

• debounce - Sie überspringen alle eingehenden Aktionen, außer der letzten (die 'letzte' wird durch die für die debounce-Funktion festgelegte 'Wartezeit' definiert, zum Beispiel 2s - es wird angenommen, dass die Aktionenflut gestoppt ist, wenn 2s lang keine Aktionen durchgeführt wurden, und dann wird reagiert. Diese Strategie ist vernünftig, wenn Sie sich nicht um regelmäßige Updates kümmern, sondern nur mindestens einmal reagieren müssen.
• throttle - Wenn Sie 'nach Plan' reagieren möchten, um regelmäßige Updates zu erstellen, auch wenn die Aktionenflut endlos ist, lassen Sie Ihre Funktion in regelmäßigen Abständen ausgeführt werden (nicht öfter als der angegebene Zeitinterval), zum Beispiel bedeutet 2s Throttling, dass Ihre Antwort einmal ausgeführt wird, wenn eine Aktion durchgeführt wird, aber nicht weniger als 2s danach. Daher wird bei kontinuierlichen Aktionen Ihre Antwort bei 0s, 2s, 4s, 6s, 8s... ausgeführt.