Debounce Explained - So lassen Sie Ihr JavaScript warten, bis Ihr Benutzer die Eingabe beendet hat

Entprellungsfunktionen in JavaScript sind Funktionen höherer Ordnung, die die Rate begrenzen, mit der eine andere Funktion aufgerufen wird.

Eine Funktion höherer Ordnung ist eine Funktion, die entweder eine Funktion als Argument verwendet oder eine Funktion als Teil ihrer return-Anweisung zurückgibt. Unsere Entprellfunktion macht beides.

Der häufigste Anwendungsfall für ein Debounce besteht darin, es als Argument an einen Ereignis-Listener zu übergeben, der an ein HTML-Element angehängt ist. Schauen wir uns ein Beispiel an, um besser zu verstehen, wie dies aussieht und warum es nützlich ist.

Angenommen, Sie haben eine Funktion namens myFunc, die jedes Mal aufgerufen wird, wenn Sie etwas in ein Eingabefeld eingeben. Nachdem Sie die Anforderungen für Ihr Projekt durchgearbeitet haben, entscheiden Sie, dass Sie die Erfahrung ändern möchten.

Stattdessen möchten Sie myFuncausführen, wenn seit der letzten Eingabe mindestens 2 Sekunden vergangen sind.

Hier kommt eine Entprellungsdose ins Spiel. Anstatt myFuncan den Ereignis-Listener zu übergeben, würden Sie die Entprellung übergeben. Die Entprellung selbst würde dann myFunczusammen mit der Nummer 2000 als Argument dienen.

Wenn Sie jetzt auf die Schaltfläche klicken, myFuncwird sie nur ausgeführt, wenn mindestens 2 Sekunden vergangen sind, bevor das letzte Mal myFuncaufgerufen wurde.

So implementieren Sie eine Entprellungsfunktion

Von Anfang bis Ende sind nur 7 Codezeilen erforderlich, um eine Entprellungsfunktion zu implementieren. Der Rest dieses Abschnitts konzentriert sich auf diese 7 Codezeilen, damit wir sehen können, wie unsere Entprellungsfunktion intern funktioniert.

function debounce( callback, delay ) { let timeout; return function() { clearTimeout( timeout ); timeout = setTimeout( callback, delay ); } }

Beginnend mit Zeile 1 haben wir eine neue Funktion mit dem Namen deklariert debounce. Diese neue Funktion hat zwei Parameter callbackund delay.

function debounce( callback, delay ) { } 

callback ist eine Funktion, die die Anzahl der Ausführungen begrenzen muss.

delayist die Zeit (in Millisekunden), die vergehen muss, bevor callbacksie erneut ausgeführt werden kann.

function debounce( callback, delay ) { let timeout; }

In Zeile 2 deklarieren wir eine nicht initialisierte Variable mit dem Namen timeout.

Diese neue Variable enthält die timeoutIDRückgabe, wenn wir setTimeoutspäter in unserer debounceFunktion aufrufen .

function debounce( callback, delay ) { let timeout; return function() { } }

In Zeile 3 geben wir eine anonyme Funktion zurück. Diese anonyme Funktion wird über der timeoutVariablen geschlossen, sodass wir auch nach Abschluss des ersten Aufrufs von auf die Variable zugreifen können debounce.

Ein Abschluss in JavaScript tritt immer dann auf, wenn eine innere Funktion weiterhin Zugriff auf den lexikalischen Bereich ihrer äußeren Funktion hat, obwohl die Ausführung der äußeren Funktion abgeschlossen ist. Wenn Sie mehr über Schließungen erfahren möchten, lesen Sie Kapitel 7 von „Sie kennen JS nicht“ von Kyle Simpson
function debounce( callback, delay ) { let timeout; return function() { clearTimeout( timeout ); } }

In Zeile 4 rufen wir die clearTimeoutMethode des WindowOrWorkerGlobalScopeMixins auf. Dadurch wird sichergestellt, dass jedes Mal, wenn wir unsere debounceFunktion aufrufen , timeoutein Reset durchgeführt wird und der Zähler erneut gestartet werden kann.

Die WindowOrWorkerGlobalScopemixin von JavaScript gibt uns Zugang zu einigen bekannten Methoden, wie setTimeout, clearTimeout, setInterval, clearInterval, und fetch.

Sie können mehr darüber erfahren, indem Sie diesen Artikel lesen.

function debounce( callback, delay ) { let timeout; return function() { clearTimeout( timeout ); timeout = setTimeout( callback, delay ); } }

In Zeile 5 haben wir das Ende unserer debounceFunktionsimplementierung erreicht.

Diese Codezeile macht ein paar Dinge. Die erste Aktion besteht darin, der timeoutVariablen, die wir in Zeile 2 deklariert haben , einen Wert zuzuweisen. Der Wert wird timeoutIDbeim Aufruf zurückgegeben setTimeout. Auf diese Weise können wir auf das durch Aufrufen erzeugte Zeitlimit verweisen, setTimeoutsodass wir es bei jeder Verwendung unserer debounceFunktion zurücksetzen können.

Die zweite ausgeführte Aktion ist das Aufrufen setTimeout. Dadurch wird eine Zeitüberschreitung erstellt, die ausgeführt wird callback(das an unsere debounceFunktion übergebene Funktionsargument), sobald delay(das an unsere debounceFunktion übergebene Zahlenargument) abgelaufen ist.

Da wir ein Timeout verwenden, callbackwird es nur ausgeführt, wenn das Timeout 0 erreicht. Hier kommt das Herzstück unserer debounceFunktion ins Spiel, da wir das Timeout bei jedem debounceAufruf zurücksetzen . Dies ermöglicht es uns, die Ausführungsrate von zu begrenzen myFunc.

Die Zeilen 5 und 6 enthalten nur Klammern, daher werden wir sie nicht durchgehen.

Das ist es. So funktioniert unsere debounceFunktion intern. Fügen wir nun von Anfang an unser vorheriges Beispiel hinzu. Wir werden ein Eingabefeld erstellen und einen Ereignis-Listener mit unserer debounceFunktion als eines seiner Argumente anhängen .

Beispiel aus der realen Welt

Zuerst müssen wir ein Eingabefeld erstellen.

Type something in! 

Als nächstes müssen wir eine Funktion erstellen, die wir ausführen möchten, wenn wir etwas in unser Eingabefeld eingeben.

function helloWorld() { console.log("Hello World!") }

Schließlich müssen wir das oben erstellte Eingabefeld auswählen und einen keyupEreignis-Listener anhängen .

const myInput = document.getElementById("myInput"); myInput.addEventListener( "keyup", debounce( helloWorld, 2000 ) );

Damit ist unser Beispiel aus der realen Welt abgeschlossen! Jedes Mal helloWorld, wenn wir etwas in unser Eingabefeld eingeben, wird es ausgeführt, wenn seit dem letzten Eingeben mindestens 2 Sekunden vergangen sind.

Besonderer Dank geht an Reddit User Stratoscope für die Unterstützung bei der Korrektur des ursprünglichen Codes in diesem Artikel. Hier ist eine funktionierende Demo, die er von dieser debounceFunktion auf Repl.it erstellt hat.

Schlussbemerkungen

Entprellungsfunktionen sind einfache, aber leistungsstarke Funktionen, die sich spürbar auf die meisten JavaScript-Anwendungen auswirken können.

Während unser Beispiel Spaß machte und unkompliziert war, verwenden viele große Unternehmen Entprellungsfunktionen, um die Leistung ihrer Anwendungen zu steigern.

Wenn Sie mehr über JavaScript erfahren möchten, besuchen Sie meine Website! Ich arbeite an einigen coolen Sachen auf //juanmvega.com.