Ausführliche Erläuterung der Konzepte zur Drosselung von JavaScript-Funktionen und Anwendungsbeispiele-js-Tutorial-php.cn

Ausführliche Erläuterung der Konzepte zur Drosselung von JavaScript-Funktionen und Anwendungsbeispiele

高洛峰

Freigeben： 2016-12-29 10:04:47

Original

1340 Leute haben es durchsucht

Die Beispiele in diesem Artikel beschreiben das Konzept und die Verwendung der JavaScript-Funktionsdrosselung. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Als ich kürzlich eine Webseite erstellte, musste ich die Größe einiger Seitenelemente ändern, wenn sich das Browserfenster änderte, also habe ich das natürlich getan Ich dachte an Fenstergröße ändern. Ereignis, also habe ich es so geschrieben

<!DOCTYPE html>
<html>
<head>
  <title>Throttle</title>
</head>
<body>
  <script type="text/javascript">
    n=0;
    function resizehandler(){
      console.log(new Date().getTime());
      console.log(++n);
    }
    window.onresize=resizehandler;
  </script>
</body>
</html>

Nach dem Login kopieren

Die Funktion wurde implementiert, aber als ich die Größe des Browserfensters durch Ziehen änderte, schaute ich auf die Konsole

Ja, durch einfaches Ziehen und Ablegen wurde meine resizeHandler()-Methode 52 Mal ausgeführt. Dies ist überhaupt nicht der gewünschte Effekt. Tatsächlich ist der Code meiner resizeHandler()-Methode sehr kompliziert und verwendet sogar Ajax, um eine Anfrage zu senden Wenn es einfach wäre, die Fenstergröße einmal zu ändern, müsste man es 52 Mal aufrufen, was in Ordnung ist

Funktionsdrosselung

Tatsächlich besteht meine ursprüngliche Absicht nur darin, einige Anpassungen vorzunehmen Seite, nachdem die Größe des Fensters geändert wurde, und das Größenänderungsereignis des Fensters wird nicht ausgelöst, nachdem die Größenänderung abgeschlossen ist. Ich kenne die spezifische Häufigkeit nicht, aber es wird kontinuierlich aufgerufen, bis sich die Fenstergröße nicht mehr ändert. Tatsächlich ist ein ähnlicher Mechanismus die Mausbewegung, die in kurzer Zeit wiederholt ausgelöst wird.

In „JavaScript Advanced Programming“ gibt es eine spezielle Funktionsdrosselung, um dieses Problem zu lösen.

function throttle(method,context){
  clearTimeout(method.tId);
  method.tId=setTimeout(function(){
    method.call(context);
  },500);
}

Nach dem Login kopieren

Das Prinzip ist sehr einfach, um die Funktionsausführung um 500 Millisekunden zu verzögern Wird innerhalb der Funktion eine Funktion erneut aufgerufen, wird der letzte Aufruf gelöscht, dieser Aufruf wird 500 Millisekunden später ausgeführt und so weiter. Auf diese Weise kann der Code, den ich gerade erstellt habe, in

<script type="text/javascript">
n=0;
function resizehandler(){
  console.log(new Date().getTime());
  console.log(++n);
}
function throttle(method,context){
  clearTimeout(method.tId);
  method.tId=setTimeout(function(){
    method.call(context);
  },500);
}
window.onresize=function(){
  throttle(resizehandler,window);
};
</script>

Nach dem Login kopieren

geändert und ausprobiert werden. Natürlich wird er nur einmal ausgeführt >

Es gibt auch einen Funktionsabschnitt zum Internet-Streaming-Schema, das ist, was es tut

Rufen Sie es auf und probieren Sie es aus, der gleiche Effekt

function throttle(method,delay){
  var timer=null;
  return function(){
    var context=this, args=arguments;
    clearTimeout(timer);
    timer=setTimeout(function(){
      method.apply(context,args);
    },delay);
  }
}

Nach dem Login kopieren

<script type="text/javascript">
n=0;
function resizehandler(){
  console.log(new Date().getTime());
  console.log(++n);
}
function throttle(method,delay){
  var timer=null;
  return function(){
    var context=this, args=arguments;
    clearTimeout(timer);
    timer=setTimeout(function(){
      method.apply(context,args);
    },delay);
  }
}
window.onresize=throttle(resizehandler,500);//因为返回函数句柄，不用包装函数了
</script>

Nach dem Login kopieren

Vergleichen Ausführliche Erläuterung der Konzepte zur Drosselung von JavaScript-Funktionen und Anwendungsbeispiele

Beide Methoden verwenden setTimeout, der Unterschied besteht jedoch darin, dass die in der zweiten Methode hinzugefügte Funktion die Ausführungszeit verzögert. Diese Funktion kann einfach durch einfaches Hinzufügen verwendet werden ein Parameter.

Aber die erste Lösung legt tId als Variable der Funktion fest und speichert sie, während die zweite Lösung einen Abschluss erstellt, um sie zu speichern. Ich persönlich glaube nicht, dass der Unterschied groß ist. Mir gefällt das erste, es ist einfach und effizient.

Neue Anforderungen

Eines Tages habe ich etwas Ähnliches gemacht, genau wie die automatische Eingabeaufforderung auf der Baidu-Homepage. Ich habe das Keyup-Ereignis an den Text gebunden und jedes Mal, wenn die Tastatur angezeigt wird, wird eine Eingabeaufforderung automatisch angezeigt , aber ich möchte nicht so oft auffordern, also habe ich die obige Methode verwendet, aber es ist eine Tragödie, die erst nach 500 Millisekunden Eingabeaufforderung erfolgt. Während des Eingabevorgangs erfolgt überhaupt keine Aufforderung. Ich habe mir den Code angesehen und festgestellt, dass er nicht wahr ist. Solange der Benutzer die Tastatur innerhalb von 500 Millisekunden berühren und drücken kann, wird die Eingabeaufforderungsfunktion kontinuierlich verzögert, sodass die Eingabeaufforderung nur dann erfolgt, wenn sie stoppt bedeutungslos.

Kann es basierend auf der Funktionsdrosselung in einem festen Intervall ausgeführt werden?

Kleine Änderungen

Nachdem wir im Internet gesucht haben, können wir einige Änderungen basierend auf der zweiten Schreibweise vornehmen (die erste Möglichkeit, mehrere Variablen für eine Funktion zu erweitern, fühlt sich etwas schlecht an) und hinzufügen Ein Parameter wie „Feste Intervalle“ muss ausgeführt werden

, damit jedes Mal, wenn wir beurteilen, wie lang das Intervall ist, es sofort ausgeführt wird, wenn es die eingestellte Zeit überschreitet. Versuchen Sie den Effekt mit dem Beispiel gerade

function throttle(method,delay,duration){
  var timer=null, begin=new Date();
  return function(){
    var context=this, args=arguments, current=new Date();;
    clearTimeout(timer);
    if(current-begin>=duration){
       method.apply(context,args);
       begin=current;
    }else{
      timer=setTimeout(function(){
        method.apply(context,args);
      },delay);
    }
  }
}

Nach dem Login kopieren

window.onresize=throttle(resizehandler,100,200);

Nach dem Login kopieren

Natürlich wird es weder häufig noch zuletzt ausgeführt Ausführliche Erläuterung der Konzepte zur Drosselung von JavaScript-Funktionen und Anwendungsbeispiele