Fallstudie zu JavaScript Anti-Shake
PrinzipDas Prinzip von Anti-Shake ist: Du kannst ein Ereignis auslösen, aber ich muss es n Sekunden nach dem Auslösen des Ereignisses ausführen. Wenn du dieses Ereignis innerhalb von n Sekunden nach dem Auslösen eines Ereignisses erneut auslöst, verwende ich die Zeit des neuen Ereignisses als Grundlage und führe es n Sekunden später aus. Kurz gesagt, ich werde nicht ausführen, bis Sie das Ereignis auslösen und innerhalb von n Sekunden keine weiteren Ereignisse ausgelöst werden. Fall
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<Kopf>
<meta charset="utf-8">
<meta http-equiv="x-ua-kompatibel" content="IE=edge, chrome=1">
<title>Entprellung</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
#Behälter {
Breite: 100 %;
Höhe: 200px;
Zeilenhöhe: 200px;
Textausrichtung: zentriert;
Farbe: #fff;
Hintergrundfarbe: #444;
Schriftgröße: 30px;
}
</Stil>
</Kopf>
<Text>
<div id="Container"></div>
<script src="debounce.js"></script>
</body>
</html>
Funktion getUserAction(e) {
konsole.log(dies);
konsole.log(e);
container.innerHTML = Anzahl++;
};
Funktion Entprellung(Funktion, warten) {
var Zeitüberschreitung;
Rückgabefunktion () {
Zeitüberschreitung löschen (Zeitüberschreitung);
Zeitüberschreitung = setzeZeitüberschreitung(() => {
func.apply(this, arguments); // Löse this und das Ereignisobjekt event
}, Warten);
}
}
container.onmousemove = Entprellung(getUserAction, 1000); Dies ist das Ende dieses Artikels über die Fallstudie zu JavaScript Anti-Shake. Weitere relevante Inhalte zu JavaScript Anti-Shake finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Detaillierte Erläuterung der Umleitungskonfiguration und -praxis von Rewrite in Nginx
>>: MySQL kontrolliert die Anzahl der Versuche, falsche Passwörter einzugeben
Artikel empfehlen
Eine detaillierte Anleitung zu benutzerdefinierten Anweisungen in Vue
Inhaltsverzeichnis 1. Was ist eine benutzerdefini...
Vue imitiert den Karusselleffekt von Ctrip (gleitendes Karussell, unten hochadaptiv)
Schauen wir uns zuerst den Fall an. Verwenden Sie...
Interviewfrage: Dreizeiliges und dreispaltiges Layout, Tabellen werden zusammengeführt und verschachtelte Tabellen sind nicht zulässig
Es gibt eine Interviewfrage, die Folgendes erforde...
Detaillierte Erläuterung der am häufigsten verwendeten Image-Befehle und Container-Befehle von Docker
Dieser Artikel listet die am häufigsten verwendet...
Zusammenfassung einiger praktischer kleiner Zaubertricks in der Vue-Praxis
Wie können Sie das Lamaging von Routen vergessen,...
Beispiel einer Vorrendering-Methode für eine Vue-Einzelseitenanwendung
Inhaltsverzeichnis Vorwort vue-cli 2.0 Version vu...
Eine vollständige Aufzeichnung eines Mysql-Deadlock-Fehlerbehebungsprozesses
Vorwort Die Datenbank-Deadlocks, die ich zuvor er...
JavaScript-Lösung für die Setinterval-Verzögerung um eine Sekunde
Bei Verwendung von setinterval wird festgestellt,...
Wie viele Ports kann ein Linux-Server maximal öffnen?
Inhaltsverzeichnis Hafenbezogene Konzepte: Bezieh...
Beispielanalyse für MySQL Oracle- und SQL Server-Paging-Abfragen
Ich habe vor Kurzem eine einfache Studie zur Date...
Zusammenfassung gängiger Fehler beim Entwurf von MySQL-Tabellen
Inhaltsverzeichnis Fehler 1: Zu viele Datenspalte...
Häufig verwendete JS-Funktionsmethoden im Frontend
Inhaltsverzeichnis 1. E-Mail 2. Mobiltelefonnumme...
Detaillierte Erläuterung des Prinzips verteilter Sperren und drei Implementierungsmethoden
Derzeit werden fast alle großen Websites und Anwe...
Vue-Plugin-Fehler: Auf dieser Seite wurde Vue.js erkannt. Problem gelöst
Das Vue-Plugin meldet einen Fehler: Vue.js wurde ...
Docker-Container kommunizieren direkt über Routing, um Netzwerkkommunikation zu erreichen
Überblick Was das aktuelle Standardnetzwerk von D...