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
Implementierung eines Docker-Compose-Bereitstellungsprojekts basierend auf MySQL8
1. Erstellen Sie zunächst den entsprechenden Ordn...
Erläuterung des Prinzips des MySQL-Replikationsmechanismus
Hintergrund Bei der Replikation handelt es sich u...
Zusammenfassung zum Erlernen von Docker-Befehlen in einem Artikel
Inhaltsverzeichnis Einführung Spiegel-Repository ...
Detaillierte Erklärung der HTML-Programmier-Tags und der Dokumentstruktur
Der Zweck der Verwendung von HTML zum Markieren v...
Lösen Sie das Docker.Socket-Berechtigungsproblem des VSCode-Docker-Plugins
Lösung: Beenden Sie alle mit .vscode in Zusammenh...
Echtzeitaktualisierung einer langen Verbindung auf der Vue+WebSocket-Seite
In letzter Zeit muss das Vue-Projekt die Daten in...
Ausführliche Erläuterung zum Beispiel der MySQL InnoDB-Tablespace-Verschlüsselung
Vorwort Ab MySQL 5.7.11 unterstützt MySQL die Dat...
Detaillierte Erklärung des Mindestbreitenwerts von Inline-Blöcken in CSS
Vorwort Vor kurzem habe ich mir abends etwas Zeit...
Vue.js-Framework implementiert Warenkorbfunktion
In diesem Artikel wird der spezifische Code des V...
HTML Einführungstutorial HTML Tag Symbole schnell beherrschen
Randbemerkung <br />Wenn Sie nichts über HTM...
So installieren Sie Docker unter CentOS und veröffentlichen Docker remote in Springboot
Inhaltsverzeichnis 1. Installation von JDK1.8 unt...
Lösung für ungültige obere Ränder von Elementen in Div-Tags
Genau wie der Titel sagt. Die Frage ist sehr merkw...
Navicat für MySQL-Tutorial
Zuerst müssen Sie Navicat für MySQL herunterladen...
CentOS 6 verwendet Docker zum Bereitstellen eines Zookeeper-Betriebsbeispiels
Dieser Artikel beschreibt, wie man mit Docker Zoo...
Vue implementiert eine kleine Formularvalidierungsfunktion
In diesem Artikelbeispiel wird der spezifische Co...