Was ist JavaScript Anti-Shake und Throttling

Inhaltsverzeichnis

1. Funktion Entprellung

1. Was ist Bildstabilisierung?

2. Funktionsdrosselung

2.1 Timer-Implementierung
2.2 Zeitstempelimplementierung
2.3 Zeitstempel + Timer

1. Funktion Entprellung

1. Was ist Bildstabilisierung?

Funktion Anti-Shake: Wenn ein Ereignis häufig ausgelöst wird, wird die entsprechende Rückruffunktion erst aufgerufen, nachdem das Ereignis für einen bestimmten Zeitraum nicht mehr ausgelöst wurde. Wenn das nächste Ereignis innerhalb des eingestellten Intervalls ausgelöst wird, wird der Timer neu gestartet, bis die Ereignisauslösung endet.

Wenn innerhalb der angegebenen Zeit kein Ereignis ausgelöst wird, wird die Ereignisverarbeitungsfunktion aufgerufen.

Das folgende Beispiel zeigt dies:

/*Anti-Shake-Funktion definieren* func: Übergeben Sie eine Funktion, die aufgerufen wird, wenn das Ereignis nicht mehr kontinuierlich ausgelöst wird* delay: Definieren Sie, wie lange die Ausführung der übergebenen Rückruffunktion dauern soll* */
 Funktion Entprellung(Funktion,Verzögerung) {
  let timer = null // wird verwendet, um den Timer zu speichern return function (...args) {
   // Wenn der Timer vorhanden ist, löschen Sie den Timer und setzen Sie ihn dann zurück
   wenn(Timer !== null) ClearTimeout(Timer)
   timer = setTimeout(func, delay) // Wenn die Verzögerung überschritten wird, wird die hier angegebene Funktion aufgerufen, um das Ereignis zu empfangen. Bei Bedarf kann der this-Zeiger der Funktion geändert werden. Da der Timer eine Referenz nach außen hat, wird er nicht zerstört.}
 }

 /*Ereignisverarbeitungsfunktion*/
 Funktion testDeBounce(){
  console.log('Wie oft habe ich es ausgeführt??')
 }

 // Empfange die von debounce zurückgegebene Funktion const temp = debounce(testDeBounce(),1000)

 /*Bind-Ereignis, Anti-Shake-Funktion testen*/
 Fenster.addEventListener('scroll',()=>{
  temp()
 }); // Dadurch wird der Eventhandler mindestens einmal aufgerufen und höchstens einmal ausgeführt window.addEventListener('scroll', testDeBounce); // Wenn es so geschrieben wird, wird der Eventhandler jedes Mal aufgerufen, wenn die Seite gescrollt wird

Um die Ideen zusammenzufassen:

1. Definieren Sie eine Drosselungsfunktion
2. Verwenden Sie eine Variable innerhalb der Funktion, um den Timer zu speichern
3. Gibt eine Funktion zurück, die definiert: Wenn der Timer bereits existiert, lösche den Timer und setze den Timer zurück
4. Definieren Sie eine Variable, um die von debounce zurückgegebene Funktion zu empfangen
5. Rufen Sie die im vorherigen Schritt in der Ereignisrückruffunktion direkt angegebene Methode zum Empfangen von Variablen auf

2. Funktionsdrosselung

Funktionsdrosselung: Unter der Prämisse einer kontinuierlichen Ereignisauslösung stellt die Funktionsdrosselung sicher, dass die Ereignisverarbeitungsfunktion innerhalb eines bestimmten Zeitraums nur einmal aufgerufen wird.

Implementierungsmethoden zur Funktionsdrosselung: Timer, Zeitstempel, Timer + Zeitstempel;

2.1 Timer-Implementierung

Ideen:

1. Definieren Sie die Drosselfunktion throttle
2. Definieren Sie timer , um den Timer zu speichern
3. Geben Sie eine Funktion zurück. Funktionsinterne Definition: Wenn der Timer nicht vorhanden ist, stellen Sie den Timer ein und setzen Sie den Timer nach einem bestimmten Intervall auf null . Wenn das Ereignis vorher erneut ausgelöst wird, ist der Rückruf im Timer ungültig.

<button>這是一個孤獨的按鈕</button>

/*
 * Definieren Sie die Timer-Drosselungsfunktion * func: Funktion zur Verarbeitung eingehender Ereignisse * delay: Der Timer-Rückruf ist innerhalb der durch delay angegebenen Zeit ungültig * */
 Funktion Drosselklappe(Funktion,Verzögerung) {
  let timer = null
  const Kontext = dies
  Rückgabefunktion (... args) {
   // Wenn der Timer nicht existiert if(!timer){
    Timer = setzeTimeout(()=>{
     func.apply(context,args) // Berücksichtigen Sie die Umgebung des zurückgegebenen Funktionsaufrufs, daher wird dies hier nicht direkt verwendet
     Timer = null // Lösche den Timer nach der Verzögerung},Verzögerung)
   }
  }
 }

 Funktion test() {
  console.log('Aaaaah!')
 }

 Konstante Temperatur = Drosselklappe (Test, 1000)

 document.querySelector('Schaltfläche').addEventListener('Klick',()=>{
  temp()
 })

2.2 Zeitstempelimplementierung

var Gashebel = Funktion(Funktion, Verzögerung) {            
  var prev = Date.now();            
  return Funktion() {                
    var Kontext = dies;                
    var args = Argumente;                
    var jetzt = Date.jetzt();                
    if (jetzt - vorh. >= Verzögerung) {                    
      func.apply(Kontext, Argumente);                    
      vorheriges = Date.now();                
    }            
  }        
}    

Funktion handle() {            
  Konsole.log(Math.random());        
}        

window.addEventListener('scroll', Drosselklappe(Griff, 1000));

2.3 Zeitstempel + Timer

// Drosselcode (Zeitstempel + Timer):
var Gashebel = Funktion(Funktion, Verzögerung) {     
    var Timer = null;     
    var startTime = Date.now();     
    return Funktion() {             
        var curTime = Date.now();             
        var verbleibende = Verzögerung – (aktuelleZeit – Startzeit);             
        var Kontext = dies;             
        var args = Argumente;             
        Zeitüberschreitung löschen(Timer);              
        wenn (restlich <= 0) {                    
            func.apply(Kontext, Argumente);                    
            Startzeit = Datum.jetzt();              
        } anders {                    
            Timer = setzeTimeout(Funktion, verbleibend);              
        }      
    }
}

Funktion handle() {      
    Konsole.log(Math.random());
} 

window.addEventListener('scroll', Drosselklappe(Griff, 1000));

Dies ist das Ende dieses Artikels über JavaScript-Anti-Shake und -Drosselung. Weitere Informationen zu JavaScript-Anti-Shake und -Drosselung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren: