Introduction aux fonctions de partage de temps en javascript

Les problèmes des fonctions de partage de temps et de limitation des fonctions sont différents. Les événements ciblés par la limitation des fonctions ne sont pas activement appelés par les utilisateurs, comme cela a été mentionné précédemment. Le principe de la limitation des fonctions est de retarder l'exécution de la fonction en cours. Si le délai n'est pas terminé, la requête suivante pour la fonction est ignorée. Cela signifie que de nombreuses requêtes de fonctions seront ignorées.

Dans certains scénarios de développement, nous pouvons injecter des milliers de nœuds dans le document à la fois. Ajouter un grand nombre de nœuds DOM au navigateur sur une courte période peut être trop pour le navigateur, et le navigateur peut le faire. le résultat sera souvent que le navigateur se bloque. Une des solutions consiste à utiliser la fonction de partage de temps (timeChunk).

La fonction de partage de temps timeChunk permet de créer des nœuds par lots. Par exemple, si 1000 nœuds sont créés en une seconde, 10 nœuds seront créés toutes les 200 ms. La fonction timeChunk spécifique est encapsulée comme suit :

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)
  }
}

Application :

Nous souhaitons ajouter 1000 nœuds au document , vous pouvez utiliser la fonction de partage de temps timeChunk pour ajouter en continu 20 nœuds toutes les 200 ms.

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);

Recommandations associées :

Résumé des connaissances en optimisation des performances JavaScript

Performances JavaScript Conseils d'optimisation

Explication détaillée des instances de délégation d'événements pour les compétences javascript d'optimisation des performances_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!