Analyse von JS-Time-Sharing-Funktionen

Dieses Mal werde ich die JS-Time-Sharing-Funktion und die Vorsichtsmaßnahmen bei der Verwendung der JS-Time-Sharing-Funktion analysieren. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Die Problematik von Time-Sharing-Funktionen und Funktionsdrosselung ist unterschiedlich. Das von der Funktionsdrosselung anvisierte Ereignis wird, wie bereits erwähnt, nicht aktiv vom Benutzer aufgerufen.

Das Prinzip der Funktionsdrosselung besteht darin, die Ausführung der aktuellen Funktion zu verzögern. Wenn die Verzögerung nicht abgeschlossen ist, wird die nächste Anforderung für die Funktion ignoriert. Dies bedeutet, dass viele Funktionsanforderungen ignoriert werden.

In einigen Entwicklungsszenarien können wir Tausende von Knoten gleichzeitig in das Dokument einfügen. Das Hinzufügen einer großen Anzahl von DOM-Knoten zum Browser in kurzer Zeit kann für uns überwältigend sein Dies führt häufig dazu, dass der Browser einfriert oder überlastet wird. Eine Lösung ist die Verwendung der Time-Sharing-Funktion (timeChunk).

Die Time-Sharing-Funktion von timeChunk ermöglicht die stapelweise Erstellung von Knoten. Wenn beispielsweise 1000 Knoten in einer Sekunde erstellt werden, werden alle 200 ms 10 Knoten erstellt. Die spezifische timeChunk-Funktion ist wie folgt gekapselt:

function timeChunk( arr, fn, count){//arr 数组 fn操作函数 count每次操作数量
  var obj,
    t;
  var start = function(){
    var len = Math.min(count||1,arr.length);
    for(var i=0; i < len; i++){
      obj = arr.shift();
      fn(obj)
    }
  };
  return function(interval){
    t = setInterval(function(){
      if(arr.length==0){
        return clearInterval(t)
      };
      start();
    },interval||200)
  }
}

Anwendung:

Join Wir möchten dem Dokument 1000 Knoten hinzufügen. Wir können die Time-Sharing-Funktion von timeChunk verwenden um kontinuierlich alle 200 ms 20 Knoten hinzuzufügen.

var arr = [];
for(var i = 1; i <= 1000; i++){
  arr.push(i)
}
var renderLists = timeChunk(arr,function(i){
  var p = document.createElement('p');
  p.innerHTML = i;
  document.body.appendChild(p);
},20);
renderLists(200);

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So übergeben Sie JSON über JS an den Controller

So konvertieren Sie HTML-Felder in Daten in HTML Schlagworte

Das obige ist der detaillierte Inhalt vonAnalyse von JS-Time-Sharing-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!