Ausführliche Erläuterung der Drosselung und des Anti-Shaking von Javascript-Funktionen

Dieser Artikel stellt hauptsächlich die Drosselung und Anti-Shake-Funktion vor. Er stellt die Prinzipien und Beispiele der Drosselung und Anti-Shake im Detail vor Ich hoffe, ich kann allen helfen.

Anti-Shake und Drosselung

Bei Größenänderung, Scrollen, Überprüfung des Inhalts des Eingabefelds und anderen Vorgängen des Fensters, wenn diese Vorgangsverarbeitungsfunktionen komplexer sind oder Seite Wenn Vorgänge wie häufiges erneutes Rendern ausgeführt werden und die Häufigkeit der Ereignisauslösung unbegrenzt ist, erhöht dies die Belastung des Browsers und führt zu einer sehr schlechten Benutzererfahrung. Zu diesem Zeitpunkt können wir Debounce (Anti-Shake) und Throttle (Throttle) verwenden, um die Auslösefrequenz zu reduzieren, ohne den tatsächlichen Effekt zu beeinträchtigen.

Diese beiden Dinge scheinen für die Projektoptimierung keine offizielle Definition zu sein. Sie scheinen hauptsächlich die schlechte Leistung und den Speicher zu lösen, die durch einige Ereignisse verursacht werden, die kontinuierlich in einem kurzen Zeitraum ausgeführt werden ;

Solche Ereignisse wie Scroll-Tastendruck, Mausbewegungsänderung usw. werden in kurzer Zeit kontinuierlich ausgelöst, was in Bezug auf die Leistung viel Geld verbraucht, insbesondere einige Vorgänge, die die DOM-Struktur ändern ;

Throttle [Throttle] ist dem Anti-Shake [Debounce] sehr ähnlich. Beide ermöglichen es, die oben genannten Ereignisse innerhalb eines bestimmten Zeitraums mehrmals auszulösen, wenn sich das angegebene Ereignis ändert kontinuierliche Auslösung zu einer bestimmten Zeit;

Drossel [Drossel]

Die beliebte Erklärung für die Drosselung ist so, als ob wir Wasser in den Wasserhahn geben, wenn das Ventil geöffnet wird, Das Wasser wird nach unten fließen, um die guten traditionellen Tugenden von Fleiß und Sparsamkeit zu wahren. Wir müssen den Wasserhahn zudrehen, es ist am besten, es innerhalb einer bestimmten Zeitspanne nach einer bestimmten Regel tropfen zu lassen Dies ist unser Konzept der Drosselung.

In Bezug auf die Funktionen verwenden Sie die Methode setTimeout, subtrahieren Sie die vorherige Zeit von der späteren Zeit und lösen Sie das Ereignis einmal aus Die von uns angegebene Zeit ist zu allgemein. Schauen wir uns die folgende Funktion an:

/** 样式我就顺便写了 **/
<style>
 *{padding:0;margin:0;}
 .scroll-box{
  width : 100%;
  height : 500px;
  background:blue;
  overflow : auto;
 } 
 .scroll-item{
  height:1000px;
  width:100%;
 }
</style>

---- ------

/** 先给定DOM结构;**/
<p class="scroll-box">
 <p class="scroll-item"></p>
</p>

------------ ------------

/**主要看js,为了简单我用JQ去写了**/
<script>
 $(document).ready(function(){
  var scrollBox = $(&#39;.scroll-box&#39;);
  //调用throttle函数，传入相应的方法和规定的时间;
  var thro = throttle(throFun,300);
  //触发事件;
  scrollBox.on(&#39;scroll&#39; , function(){
   //调用执行函数;
   thro();
  })

  // 封装函数; 
  function throttle(method,time){
   var timer = null;
   var startTime = new Date();
   return function(){
    var context = this;
    var endTime = new Date();
    var resTime = endTime - startTime;
    //判断大于等于我们给的时间采取执行函数;
    if(resTime >= time){
     method.call(context);
     //执行完函数之后重置初始时间，等于最后一次触发的时间
     startTime = endTime;
    }
   }
  }
  function throFun(){
   console.log(&#39;success&#39;);
  }
 })
</script>

Durch die obige Funktion können wir den Drosselungseffekt erzielen und ihn natürlich alle 300 Millisekunden auslösen , die Zeit kann je nach Bedarf angepasst werden;

Anti-Shake[Entprellung]

Bevor wir den Code schreiben, klären wir zunächst das Konzept von Anti-Shake I Ich frage mich, ob Sie so etwas jemals mit schwebenden Werbefenstern auf beiden Seiten des Computers gemacht haben. Wenn wir die Bildlaufleiste ziehen, versuchen die Werbefenster auf beiden Seiten aufgrund des Ziehens der Bildlaufleiste ständig, sich in der Mitte zu befinden. und dann werden Sie sehen, wie diese beiden Fenster zittern.

Im Allgemeinen wird dies als Jitter bezeichnet. Diese Art von Jitter wird als Entprellen bezeichnet Der Grund für die Entprellung besteht darin, dass nach dem Ziehen beide Seiten neu berechnet werden, sodass sie glatt und angenehm anzusehen sind und die Häufigkeit der Bedienung der DOM-Struktur am wichtigsten ist stark reduziert;

Optimiert die Seitenleistung und reduziert den Speicherverbrauch, andernfalls kann es bei Ihnen zu einem Absturz kommen, wenn Sie einen älteren Browser wie den IE haben

In schriftlicher Form wird die Funktion erst ausgeführt Nach dem Ende geben wir eine Verzögerungszeit an und führen diese Funktion dann nach der angegebenen Verzögerungszeit aus.

Schauen wir uns den Code an:

Die Idee ist, dass wir vor der Ausführung der Funktion zuerst den Timer löschen. Wenn die Funktion weiterhin ausgeführt wird, werden die Methoden im Timer weiterhin gelöscht nicht ausgeführt werden, bis unsere Operation abgeschlossen ist ;

//将上面的throttle函数替换为debounce函数;
function debounce(method,time){
 var timer = null ;
 return function(){
  var context = this;
  //在函数执行的时候先清除timer定时器;
  clearTimeout(timer);
  timer = setTimeout(function(){
   method.call(context);
  },time);
 }
}

Tatsächlich gibt es viele Möglichkeiten zu schreiben, und das Hauptproblem ist die Idee. Je mehr Sie schreiben, desto mehr werden Sie verstehen >Zweck

Wenn wir eine Tastenanforderungsüberprüfung im Hintergrund durchführen, können wir die Anti-Shake-Funktion verwenden. Andernfalls werden wir bei jedem Tastendruck eine Abfrage durchführen . Auf diese Weise werden wir erneut nachfragen, wenn wir mit dem Drücken der Tastatur fertig sind. Die Leistung wird natürlich geringer ausfallen. Wir können Anti-Shake-Technologie oder Drosselung verwenden.

1. Mausbewegungsereignis. Wir können entweder Anti-Shake- oder Drosselungsereignis verwenden ausgelöst durch die Bildlaufleiste, kann natürlich entweder Anti-Shake oder Throttling verwendet werden;

2. Kontinuierliche Hochfrequenzereignisse können auf diese beiden Arten gelöst werden, um die Seitenleistung zu optimieren;

3. Welches besser geeignet ist, hängt hauptsächlich von Ihren geschäftlichen Anforderungen ab.
   Verwandte Empfehlungen:

4. Die Bedeutung von Funktionsdrosselung und Anti-Shaking

5. Detaillierte Analyse der Entprellung und Drosselung von JS-Funktionen_Grundkenntnisse

Detaillierte Erläuterung der JavaScript-Funktionsdrosselung und Methodenbeispiele

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Drosselung und des Anti-Shaking von Javascript-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!