1. Funktion Entprellung 1. Was ist Bildstabilisierung?
Wenn innerhalb der angegebenen Zeit kein Ereignis ausgelöst wird, wird die Ereignisverarbeitungsfunktion aufgerufen. Das folgende Beispiel zeigt dies: /*Anti-Shake-Funktion definieren* func: Übergeben Sie eine Funktion, die aufgerufen wird, wenn das Ereignis nicht mehr kontinuierlich ausgelöst wird* delay: Definieren Sie, wie lange die Ausführung der übergebenen Rückruffunktion dauern soll* */ Funktion Entprellung(Funktion,Verzögerung) { let timer = null // wird verwendet, um den Timer zu speichern return function (...args) { // Wenn der Timer vorhanden ist, löschen Sie den Timer und setzen Sie ihn dann zurück wenn(Timer !== null) ClearTimeout(Timer) timer = setTimeout(func, delay) // Wenn die Verzögerung überschritten wird, wird die hier angegebene Funktion aufgerufen, um das Ereignis zu empfangen. Bei Bedarf kann der this-Zeiger der Funktion geändert werden. Da der Timer eine Referenz nach außen hat, wird er nicht zerstört.} } /*Ereignisverarbeitungsfunktion*/ Funktion testDeBounce(){ console.log('Wie oft habe ich es ausgeführt??') } // Empfange die von debounce zurückgegebene Funktion const temp = debounce(testDeBounce(),1000) /*Bind-Ereignis, Anti-Shake-Funktion testen*/ Fenster.addEventListener('scroll',()=>{ temp() }); // Dadurch wird der Eventhandler mindestens einmal aufgerufen und höchstens einmal ausgeführt window.addEventListener('scroll', testDeBounce); // Wenn es so geschrieben wird, wird der Eventhandler jedes Mal aufgerufen, wenn die Seite gescrollt wird Um die Ideen zusammenzufassen:
2. Funktionsdrosselung
Implementierungsmethoden zur Funktionsdrosselung: Timer, Zeitstempel, Timer + Zeitstempel; 2.1 Timer-ImplementierungIdeen:
/* * Definieren Sie die Timer-Drosselungsfunktion * func: Funktion zur Verarbeitung eingehender Ereignisse * delay: Der Timer-Rückruf ist innerhalb der durch delay angegebenen Zeit ungültig * */ Funktion Drosselklappe(Funktion,Verzögerung) { let timer = null const Kontext = dies Rückgabefunktion (... args) { // Wenn der Timer nicht existiert if(!timer){ Timer = setzeTimeout(()=>{ func.apply(context,args) // Berücksichtigen Sie die Umgebung des zurückgegebenen Funktionsaufrufs, daher wird dies hier nicht direkt verwendet Timer = null // Lösche den Timer nach der Verzögerung},Verzögerung) } } } Funktion test() { console.log('Aaaaah!') } Konstante Temperatur = Drosselklappe (Test, 1000) document.querySelector('Schaltfläche').addEventListener('Klick',()=>{ temp() }) 2.2 Zeitstempelimplementierungvar Gashebel = Funktion(Funktion, Verzögerung) { var prev = Date.now(); return Funktion() { var Kontext = dies; var args = Argumente; var jetzt = Date.jetzt(); if (jetzt - vorh. >= Verzögerung) { func.apply(Kontext, Argumente); vorheriges = Date.now(); } } } Funktion handle() { Konsole.log(Math.random()); } window.addEventListener('scroll', Drosselklappe(Griff, 1000)); 2.3 Zeitstempel + Timer// Drosselcode (Zeitstempel + Timer): var Gashebel = Funktion(Funktion, Verzögerung) { var Timer = null; var startTime = Date.now(); return Funktion() { var curTime = Date.now(); var verbleibende = Verzögerung – (aktuelleZeit – Startzeit); var Kontext = dies; var args = Argumente; Zeitüberschreitung löschen(Timer); wenn (restlich <= 0) { func.apply(Kontext, Argumente); Startzeit = Datum.jetzt(); } anders { Timer = setzeTimeout(Funktion, verbleibend); } } } Funktion handle() { Konsole.log(Math.random()); } window.addEventListener('scroll', Drosselklappe(Griff, 1000)); Dies ist das Ende dieses Artikels über JavaScript-Anti-Shake und -Drosselung. Weitere Informationen zu JavaScript-Anti-Shake und -Drosselung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Zwei gängige Lösungen für den HTML-Textüberlauf zeigen Auslassungszeichen an
>>: Grafische Erläuterung der Lösungen zur Frontend-Verarbeitung kleiner Symbole
Inhaltsverzeichnis 1. Was ist Promise 2. Grundleg...
1. Installation apt-get install mysql-server erfo...
Docker-Funktionen 1) Schneller Einstieg Benutzer ...
Vorwort Es gibt vier Arten von Operatoren in MySQ...
1. Überprüfen Sie den Zeichensatz der Datenbank D...
Inhaltsverzeichnis Vorwort 1. Vorbereitung 2. Ins...
1. Ändern Sie die Docker-Konfigurationsdatei des ...
Das META-Tag ist ein Hilfstag im Kopfbereich der ...
MySQL ist ein relationales Datenbankverwaltungssy...
Zur Erinnerung: Egal ob bei der Planung, Gestaltun...
Vorwort Als ich zuvor das Front-End studierte, be...
Die im Internet gefundene Methode funktioniert Die...
Teilen Sie einen Echtzeituhreffekt, der mit nativ...
Dieser Artikel zeichnet das grafische Tutorial zu...
Um folgende Ziele zu erreichen: Die MySQL-Datenba...