Ausführliche Erläuterung der Drosselung und Anti-Shake-Entprellung der Javascript-Funktion

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 Anti-Shake [Debounce] sehr ähnlich. Beide ermöglichen es, die oben genannten Ereignisse innerhalb eines bestimmten Zeitraums auszulösen, wenn sich das angegebene Ereignis von kontinuierlich ändert Auslösen auf eine bestimmte 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. Dies wahrt die guten traditionellen Tugenden von Fleiß und Sparsamkeit. Wir müssen den Wasserhahn zudrehen, es ist am besten, es innerhalb einer bestimmten Zeitspanne nach unserem Willen tropfen zu lassen . Das ist unser Konzept der Drosselung.

In Bezug auf die Funktionen verwenden Sie die setTimeout-Methode, subtrahieren Sie die vorherige Zeit von der späteren Zeit und lösen Sie das Ereignis einmal aus, wenn die Zeit erreicht ist Wir geben an, dass dies zu allgemein ist. 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>

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.

/**主要看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>

Anti-Shake[Entprellung]

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

Im Allgemeinen wird dies als Jitter bezeichnet. Wir müssen diese Art von Jitter verhindern, der als Entprellen bezeichnet wird Die Entprellung besteht darin, dass nach dem Ziehen beide Seiten neu berechnet werden, sodass sie glatt und angenehm anzusehen sind. Der wichtigste Vorgang der DOM-Struktur wird stark reduziert Optimiert die Seitenleistung und reduziert den Speicherverbrauch. Andernfalls kann es bei Ihnen zu einem Absturz kommen, wenn Sie eine ältere Version des Browsers wie IE haben.

In schriftlicher Form wird die Funktion erst nach Ablauf eines bestimmten Ereignisses ausgeführt Am 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. Die Funktion wird erst dann ausgeführt, wenn unser Vorgang ausgeführt wird ist abgeschlossen. ;

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

Wenn wir eine Tastenüberprüfung im Hintergrund durchführen, können wir die Anti-Shake-Funktion verwenden. Andernfalls werden wir jedes Mal, wenn wir die Tastatur drücken, eine Anfrage stellen wird erneut angefordert, wenn wir mit dem Drücken der Tastatur fertig sind. Die Anforderungen werden viel geringer sein und die Leistung wird natürlich sein. Bei der Größenänderung des Fensters können wir Anti-Shake verwenden Technologie oder Drosselung;

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

Mausbewegungsereignis Wir können entweder Anti-Shake oder Drosselung verwenden;

Scroll-Ereignis, ausgelöst durch die Bildlaufleiste, Natürlich kann entweder Anti-Shake oder Throttling verwendet werden.
Kontinuierliche Hochfrequenzereignisse können auf diese beiden Arten gelöst werden, um die Seitenleistung zu optimieren
2. Verwandte Empfehlungen:

3. Detaillierte Erläuterung der Beispiele für JS-Funktionsdrosselung und Anti-Shake

4. Detaillierte Erläuterung der Drosselung und Anti-Shake von Javascript-Funktionen

5. Die Bedeutung von Funktionsdrosselung und Anti-Shake

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