Heim > Web-Frontend > js-Tutorial > Hauptteil

Einführung in Time-Sharing-Funktionen in Javascript

小云云
Freigeben: 2018-03-30 09:47:42
Original
1504 Leute haben es durchsucht

Die Probleme von Time-Sharing-Funktionen und Funktionsdrosselung sind unterschiedlich. Die von der Funktionsdrosselung anvisierten Ereignisse werden, wie bereits erwähnt, nicht aktiv von Benutzern 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 den Browser zu viel sein Die Folge ist häufig, dass der Browser einfriert. Eine der Lösungen 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)
  }
}
Nach dem Login kopieren

Anwendung:

Wir möchten dem Dokument 1000 Knoten hinzufügen , können Sie die timeChunk-Time-Sharing-Funktion 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(&#39;p&#39;);
  p.innerHTML = i;
  document.body.appendChild(p);
},20);
renderLists(200);
Nach dem Login kopieren

Verwandte Empfehlungen:

Zusammenfassung der Kenntnisse zur JavaScript-Leistungsoptimierung

JavaScript-Leistung Optimierungstipps

Detaillierte Erläuterung von Ereignisdelegierungsinstanzen für Javascript-Leistungsoptimierung_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonEinführung in Time-Sharing-Funktionen in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!