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
![Analyse der Verwendung temporärer MySQL-Tabellen [Abfrageergebnisse können in temporären Tabellen gespeichert werden]](/upload/images/67cadb7533b0e.webp)
Artikel empfehlen
Verwenden Sie Navicate, um eine Verbindung zu MySQL auf dem Alibaba Cloud Server herzustellen
1. Geben Sie zuerst das MySQL des Servers ein, um...
Zeichnen Sie den gesamten Prozess der MySQL-Master-Slave-Konfiguration basierend auf Linux auf
MySQL Master-Slave-Konfiguration 1. Vorbereitung ...
MySQL implementiert Protokollverwaltung, Sicherung und Wiederherstellung auf Unternehmensebene – praktisches Tutorial
Hintergrund Mit der Entwicklung des Geschäfts exp...
Acht Möglichkeiten zur Implementierung von Kommunikation in Vue
Inhaltsverzeichnis 1. Komponentenkommunikation 1....
Installieren Sie Docker unter CentOS 7
Wenn Sie kein Linux-System haben, finden Sie unte...
Beheben Sie den Fehler bei der Installation von VMware Tools unter Ubuntu 18.04
1. Laut dem Online-Tutorial schlägt die Installat...
Implementierung des Imports und Exports von Docker-Images
Docker-Nutzung von Gitlab Gitlab Docker Startbefe...
Eine Sammlung von Informationen zu Formularen und Formularübermittlungsvorgängen in HTML
Hier stellen wir das Wissen über Formularelemente...
Welche Arten von MySQL-Verbindungsabfragen kennen Sie?
Vorwort Wenn die Abfrageinformationen aus mehrere...
html+css+js zur Realisierung der Funktion der Fotovorschau und des Bildhochladens
Vorwort: Wenn wir Webseiten erstellen, müssen wir...
Tipps zur Konvertierung von MySQL-Spalten in Zeilen (teilen)
Vorwort: Weil viele Geschäftstabellen Entwurfsmus...
Beispiel für die Verwendung einer Keep-Alive-Komponente in Vue
Problembeschreibung (was ist Keep-Alive) Keep-Ali...
Beispiel für eine Nginx-Cache-Konfiguration
Beim Entwickeln und Debuggen einer Webanwendung s...
Detaillierte Erklärung des Grid-Layouts und des Flex-Layouts der Anzeige in CSS3
Das Gitterlayout weist einige Ähnlichkeiten mit d...
Zusammenfassung zur Verwendung von MySQL-Isolationsspalten und Präfixindizes
Inhaltsverzeichnis Datenspalten isolieren Präfixi...