Detaillierte Erklärung zu JavaScript Anti-Shake und Throttling

Entprellen

Definition: Bei Ereignissen, die innerhalb eines kurzen Zeitraums kontinuierlich ausgelöst werden, z. B. Bildlaufereignisse, bedeutet Anti-Shake, dass die Ereignisverarbeitungsfunktion innerhalb einer bestimmten Zeitspanne nur einmal ausgeführt wird.

Nehmen wir zum Thema Verwacklungsschutz das Beispiel, mit dem Finger auf eine Feder zu drücken. Drücken Sie mit dem Finger auf die Feder und halten Sie den Druck aufrecht. Die Feder wird nicht zurückfedern, bis Sie den Finger loslassen.

Beispiel für die Größenänderung:

Funktion Entprellung(fn, warten){
    var Timer = null;
    Rückkehr ()=>{
        wenn(timer !== null){
            Zeitüberschreitung löschen(Timer);
        }
        Timer = setzeTimeout(fn, warte);
    }
}
Funktion handle(){
    Konsole.log(Math.random());
}
window.addEventListener("Größe ändern",Entprellung(Handle, 1000));

Das Obige ist die Version mit nicht sofortiger Ausführung

Version mit sofortiger Ausführung

Funktion Entprellung(fn, warten){
	lass timeid, flag = true;
	zurückgeben () => {
		Zeitüberschreitung löschen (Zeit-ID);
		wenn(Flagge){
			fn();
			Flagge = falsch;
		}anders{
			Zeit-ID = setzeTimeout(()=>{
				Flagge = wahr;
			}, Warten);
		}
	}
}

Das Ziehen des Browserfensters löst die Größenänderung aus, die Handle-Funktion wird zu diesem Zeitpunkt jedoch nicht ausgelöst. Der Timer beginnt zu zählen. Wenn die Größenänderung innerhalb der Zeit erneut ausgelöst wird, startet der Timer erneut. Dies hat den Vorteil, dass das Ziehen des Browserfensters zum Auslösen der Größenänderung die Handle-Funktion nicht häufig ausführt, sondern nur bei Bedarf ausgeführt werden kann, wodurch Redundanz effektiv vermieden wird.

Gängige Schreibmethoden:

const Entprellung = (Funktion, Verzögerung = 200) => {
  let timeout = null
  Rückgabefunktion () {
    Zeitüberschreitung löschen (Zeitüberschreitung)
    Zeitüberschreitung = setzeZeitüberschreitung(() => {
      func.apply(diese, Argumente)
    }, Verzögerung)
  }
}

Gaspedal

Definition : Lassen Sie das Ereignis innerhalb eines bestimmten Zeitraums nur einmal ausführen.

Die ursprüngliche Absicht besteht darin, dass es wie das Tropfen von Wasser aus einem Wasserhahn ist und nur einmal innerhalb einer bestimmten Zeit ausgeführt wird, um häufige und wiederholte Ausführungen zu reduzieren.

Wie etwa ein Suchfeld-Eingabeereignis.

Berechnen nach Zeitstempel:

Funktion Drosselklappe(fn,warten){
  lass startTime = 0;
  Rückgabefunktion(){
    let endTime = Date.now();
    wenn(Endzeit-Startzeit>warten){
      fn();
      Startzeit = Endzeit;
    }
  }
}

Nach Timer:

Funktion Drosselklappe(fn,warten){
  lass timeid = null;
  Rückgabefunktion(){
    wenn(!timeid){
       Zeit-ID = setzeTimeout(Funktion(){
         fn();
         Zeit-ID = null;
       },Warten)
    }
  }
}

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!