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
Wirkung Die Wirkung ist wie folgt Umsetzungside...
In MySQL 8.0.18 wurde eine neue Hash-Join-Funktio...
In diesem Artikel wird der spezifische Code von B...
XPath ist eine Sprache zum Auswählen von Teilen v...
Verwendung von MySQL-Speichertabellen und temporä...
In diesem Artikel werden MySQL-Duplikatsindizes u...
Vorwort: In MySQL sind Ansichten wahrscheinlich e...
In diesem Artikelbeispiel wird der spezifische Co...
Deaktivieren und Aktivieren von MySQL-Fremdschlüs...
Durch die kurze Einführung in den beiden vorherig...
Liste der HTTP-Rückgabecodes (unten finden Sie ei...
Der Code sieht folgendermaßen aus: .Verfahren{ Ra...
Netzwerksicherheit ist ein sehr wichtiges Thema u...
getElementById kann das Objekt nicht abrufen Beim...
Wenn wir in CentOS7 MySQL installieren, wird Mari...