Code-Implementierung
function debounce(fn,delay){
let timerId;
return function(...args){
clearTimeout(timerId);
timerId=setTimeout(()=>{
fn.apply(this,args);
},delay);
};
}
//usage
const d_layout = debounce(layout,500);
window.onresize = d_layout;In JavaScript ist die Debounce-Funktion ein zentrales Werkzeug zur Optimierung von hochfrequenten und zeitintensiven Operationen. Ihre Kernlogik besteht darin, die Funktionsausführung zu verzögern und wiederholte Verzögerungen zu abbrechen. Dadurch wird sichergestellt, dass eine Funktion, die innerhalb kurzer Zeit mehrmals ausgelöst wird, erst nach einem angegebenen Verzögerungszeitraum nach dem letzten Auslösen ausgeführt wird – so werden Leistungsverluste durch überflüssige Aufrufe vermieden.
Prinzipiell lässt sich ihr Funktionieren am Beispiel des "Aufzugstürschlusses" verstehen: Nachdem ein Aufzug seine Türen geöffnet hat, wartet er standardmäßig eine feste Zeit (z. B. 2 Sekunden), bevor er sie schließt. Kommt während dieser Wartezeit ein neuer Passagier herein (entspricht einem erneuten Auslösen der Funktion), wird der ursprüngliche Warte-Timer abgebrochen und der Countdown neu gestartet. Nur wenn nach Abschluss des Countdowns kein neues Auslösen erfolgt, wird die Aktion "Türen schließen" (entspricht der Funktionsausführung) durchgeführt.
Snippet-Beschreibung
Anwendungsfälle
- Hochfrequentes Auslösen: Die Funktion wird innerhalb kurzer Zeit wiederholt aufgerufen (z. B. resize-Ereignisse des Fensters, input-Ereignisse von Eingabefeldern). Dies ist nicht auf DOM-Ereignisse beschränkt, sondern gilt auch für hochfrequente Funktionsaufrufe in Nicht-DOM-Umgebungen (z. B. Node.js).
- Zeitintensive Funktionen: Die aufgerufene Funktion ist entweder CPU-intensiv (z. B. Seitenlayout-Berechnungen, umfangreiche DOM-Operationen, die Reflows/Repaints verursachen) oder E/A-intensiv (z. B. Netzwerkanfragen, Dateilesen/Schreiben). Einfache Operationen (wie die Berechnung 1+1) erfordern kein Debouncing.
- Priorität des letzten Ergebnisses: Aus den Ergebnissen mehrerer Aufrufe innerhalb kurzer Zeit ist nur das Ergebnis des letzten Aufrufs zu behalten. Beispielsweise: Nach der Anpassung der Fenstergröße benötigt man nur das Layout zur endgültigen Größe – Layouts aus dem Anpassungsprozess sind irrelevant.
Empfohlene Snippets
Hello World
PHP Hello World Beispiel, PHP ist eine serverseitige Skriptsprache, hauptsächlich für Webentwicklung verwendet, kann in HTML eingebettet werden
Hello World
Kotlin Hello World Beispiel, Kotlin ist eine moderne JVM-Sprache von JetBrains und eine der bevorzugten Sprachen für Android-Entwicklung
Hello World
Perl Hello World Beispiel, Perl ist eine mächtige Textverarbeitungssprache, bekannt für ihre Flexibilität und reiche Unterstützung regulärer Ausdrücke