Beispielcode für die JS-Funktion „Anti-Shake“ und „Throttling“ zur Entwicklung von Webprojekten
StabilisierungKlassische Anwendung häufig: Ziehharmonika-Effekt EinführungWebsite ohne Anti-Shake:
Websites mit Anti-Shake:
Anti-Shake-Szene 1 (Maus bewegt sich hinein) Jitter: Der Benutzer beabsichtigt nicht, diese Interaktion auszulösen, aber das Interaktionsereignis wird versehentlich aufgrund eines unbeabsichtigten Mauszitterns ausgelöst. Funktion Anti-Shake: Wenn ein Benutzer ein Ereignis mehrmals hintereinander auslöst, wird nur das letzte ausgeführt. Lösungsprinzip: Schalten Sie den Timer ein. Wenn das Ereignis innerhalb des Intervalls mehrmals ausgelöst wird, löschen Sie jedes Mal den vorherigen Timer. Beispiel und Lösungscode:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8" />
<title>Animation-Fallstudie „Akkordeon“</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
ul {
Listenstil: keiner;
Breite: 2400px;
}
#Kasten {
Breite: 1200px;
Höhe: 400px;
Rand: 1px durchgehend rot;
Rand: 100px automatisch;
Überlauf: versteckt;
}
#box li {
Breite: 100px;
Höhe: 400px;
schweben: links;
Übergang: alle 0,5 s Auslaufen;
}
#box li.über {
Breite: 800px;
}
</Stil>
</Kopf>
<Text>
<div id="box">
<ul>
<li v-for="(Element, Index) in Liste" :Klasse="{over:overIndex == Index}" @mouseenter="doEnter(Index)">
<img :src="item" alt="">
</li>
</ul>
</div>
<script src="./vue.js"></script>
<Skript>
let app = neues Vue({
el:'#box',
Daten:{
überIndex:0,
Liste:[
'./images/collapse/1.jpg',
'./images/collapse/2.jpg',
'./images/collapse/3.jpg',
'./images/collapse/4.jpg',
'./images/collapse/5.jpg',
],
Zeit-ID: null
},
Methoden: {
Geben Sie ein (Index) {
/* Anti-Shake aktivieren*/
//1.1 Lösche zuerst den letzten Timer und verwende diese Zeit als Referenz „clearTimeout(this.timeID)“.
//1.2 Timer starten (Anti-Shake-Intervall)
diese.ZeitID = setTimeout(()=>{
dies.overIndex = Index;
},500)
}
},
})
</Skript>
</body>
</html>
Anti-Shake-Szene 2 (Tastaturtasten) Klassisches Anwendungsszenario: Suche nach assoziierten Wörtern
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dokument</title>
</Kopf>
<Text>
<input type="text" placeholder="Bitte geben Sie den Suchinhalt ein">
<Skript>
lass timeID = null;
Dokument.querySelector('Eingabe').oninput = Funktion(){
/* Anti-Shake-Funktion */
//(1) Lösche zuerst den vorherigen Timer clearTimeout(timeID)
//(2) Aktiviere den Anti-Shake-Timer timeID = setTimeout(() => {
Konsole.log(dieser.Wert);
}, 500);
}
</Skript>
</body>
</html>
Funktionsdrosselung Konzept: Lösen Sie Leistungsprobleme, die durch hochfrequente Ereignisse verursacht werden. Hochfrequente Ereignisse: Auf der Seite werden einige Ereignisse sehr häufig ausgelöst. Lösung: Wenn ein Benutzer ein Ereignis mehrmals hintereinander auslöst, wird es innerhalb einer angegebenen Zeit nur einmal ausgelöst. Beispiel und Lösungscode:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dokument</title>
<Stil>
Körper{
Höhe: 3000px;
}
</Stil>
</Kopf>
<Text>
<Skript>
lass letzteZeit = null;
sei i = 1;
Fenster.onmousemove = function(){
/* Funktionsdrosselung */
//(1) Bestimme den zeitlichen Abstand zwischen zwei Trigger-Ereignissen let time = Date.now()
wenn( Zeit - letzteZeit >= 500 ){
console.log('Anzahl der Mausbewegungen: ' + i++);
//(2) Dieser Triggerzeitpunkt wird als nächstes Referenzintervall verwendet lastTime = time
}
}
// sei j = 1;
// Fenster.OnScroll = Funktion(){
// //(1) Bestimme den zeitlichen Abstand zwischen zwei auslösenden Ereignissen// let time = Date.now()
// wenn( Zeit - letzteZeit >= 500 ){
// console.log('Anzahl der Mausscrolls: ' + j++);
// //(2) Dieser Triggerzeitpunkt wird als Referenzintervall für den nächsten Zeitpunkt verwendet // lastTime = time
// }
// }
</Skript>
</body>
</html>
Oben sind die Details des Beispielcodes für die JS-Funktion „Anti-Shake“ und „Throttling“ bei der Entwicklung von Webprojekten aufgeführt. Weitere Informationen zur JS-Funktion „Anti-Shake“ und „Throttling“ bei Webprojekten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
>>: So installieren Sie MySQL 5.7.29 mit einem Klick mithilfe eines Shell-Skripts
Artikel empfehlen
Detaillierte Erläuterung der Funktionen und Verwendung allgemeiner MySQL-Speicher-Engines
Dieser Artikel veranschaulicht anhand von Beispie...
Detaillierte Erläuterung des zugrunde liegenden Prinzips von defineCustomElement, hinzugefügt in vue3.2
Inhaltsverzeichnis Webkomponenten benutzerdefinie...
Detaillierte Analyse des Explain-Ausführungsplans in MySQL
Vorwort Das Schreiben effizienter SQL-Anweisungen...
Docker ändert die Konfigurationsinformationen eines nicht gestarteten Containers
Als ich Docker zum ersten Mal verwendete, habe ic...
So implementieren Sie https mit Nginx und OpenSSL
Wenn die Serverdaten nicht verschlüsselt und mit ...
Lösung für das Problem des Informationsverlusts mit "_" im Header bei Verwendung des Nginx-Proxys
Vorwort Bei der Entwicklung eines Gateway-Projekt...
So gehen Sie mit der Meldung „Vorgang nicht zulässig“ beim Löschen von Dateien in Linux um
Kollegen fragen oft, ob beim Löschen von Dateien/...
Implementierung einer benutzerdefinierten Vue-Vorlage von vscode
Verwenden Sie den Vscode-Editor, um eine Vue-Vorl...
Analysieren Sie die Dauer von TIME_WAIT aus dem Linux-Quellcode
Inhaltsverzeichnis 1. Einleitung 2. Lassen Sie un...
Schreiben von qualitativ hochwertigem Code – Praxisbuchauszüge zur Web-Frontend-Entwicklung
(Teil 4) Webstandards bestehen aus einer Reihe von...
Docker startet den Implementierungsprozess der MySQL-Konfiguration
Inhaltsverzeichnis Tatsächlicher Kampfprozess Beg...
Detaillierte Erläuterung der Angular-Routing-Unterrouten
Inhaltsverzeichnis 1. Subroutensyntax 2. Beispiel...
Tabelle zeigt den Grenzcode, den Sie anzeigen möchten
Gemeinsame Eigenschaften von Tabellen Die grundle...
HTML-Grundlagen: Die grundlegende Struktur von HTML
Die Grundstruktur von HTML-Hypertextdokumenten bes...
So lösen Sie das Problem, dass Tomcat9.exe abstürzt
Ein Leser kontaktierte mich und fragte, warum es ...