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
CSS3 legt eine Maske für das Hintergrundbild fest und löst das Problem der Maskenstilvererbung
In vielen Fällen müssen Sie den Bildhintergrund b...
Lösung für Docker-Container, der Schriftarten wie Songti nicht erkennt
Problemhintergrund: Wenn Sie Docker zum Bereitste...
Tutorial zum Bereitstellen des Open-Source-Projekts Tcloud mit Docker auf CentOS8
1. Docker installieren 1. Ich habe Centos7 in der...
Beispielanalyse der Suchfunktion von MySQL-regulären Ausdrücken (regexp und rlike)
Dieser Artikel veranschaulicht anhand von Beispie...
Antworten auf mehrere häufig gestellte MySQL-Interviewfragen
Vorwort: Bei Vorstellungsgesprächen für verschied...
So legen Sie ein Kennwort für MySQL Version 5.6 auf dem Mac fest
MySQL kann bei der Installation festgelegt werden...
js implementiert Axios Limit-Anforderungswarteschlange
Inhaltsverzeichnis Der Hintergrund ist: Was wird ...
Beispiele für häufige Nginx-Fehlkonfigurationen
Inhaltsverzeichnis Fehlender Stammspeicherort Off...
JavaScript implementiert die Kontrollkästchenauswahlfunktion
In diesem Artikelbeispiel wird der spezifische Ja...
Basierend auf Vue-Simple-Uploader, kapselt die globale Upload-Plug-In-Funktion des Dateisegment-Uploads, des sofortigen Uploads und der Breakpoint-Fortsetzung
Inhaltsverzeichnis 1. Einleitung 2. Über vue-simp...
Einführung in die CSS-Stilklassifizierung (Grundkenntnisse)
Klassifizierung von CSS-Stilen 1. Interner Stil -...
Beheben Sie den Fehler beim Starten von MongoDB: Fehler beim Laden gemeinsam genutzter Bibliotheken: libstdc++.so.6: Gemeinsam genutzte Objektdatei kann nicht geöffnet werden:
Beim Starten von MongoDB lautet die Eingabeauffor...
Manuelles Implementieren des Eingabefelds für den js-SMS-Bestätigungscode
Vorwort Dieser Artikel beschreibt eine allgemeine...
HTML+CSS-Boxmodellbeispiel (Kreis, Halbkreis usw.) „border-radius“ ist einfach und leicht zu verwenden
Viele Freunde stellten beim Erlernen des Front-En...
HTML-Grundlagen - Pflichtlektüre - Umfassendes Verständnis von CSS-Stylesheets
CSS (Cascading Style Sheet) wird zum Verschönern ...