JS utilise des fonctions de partage de temps pour optimiser le code

Cette fois, je vais vous présenter l'utilisation des fonctions de partage de temps pour optimiser le code en JS Quelles sont les précautions pour optimiser JS à l'aide des fonctions de partage de temps. Ce qui suit est un cas pratique, prenons. un regard.

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é, alors la prochaine requête 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. L'ajout d'un grand nombre de nœuds DOM au navigateur sur une courte période de temps peut s'avérer fastidieux. le navigateur. En conséquence, cela provoque souvent le blocage ou le dépassement du navigateur. Une solution 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 :

Rejoindre Nous voulons ajouter 1000 nœuds au document. Nous pouvons utiliser le timeChunk. fonction de partage pour ajouter en continu toutes les 200 ms 20 nœuds.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Paramètre de transfert d'environnement Vue regroupant différentes analyses de code de nom de domaine

Comment Vue opère la conversion de chaîne de champ HTML Pour les balises HTML

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!