Définition de la limite d'expiation JavaScript dans Google Chrome

Lorsque vous avez beaucoup de traitement à faire du côté du client, vous devez diviser votre travail en threads séparés. Le navigateur n'a qu'un seul thread pour la manipulation des entrées utilisateur (événements) et pour le traitement de JS. Si vous traitez trop de JS, sans céder, l'interface utilisateur devient insensible et le navigateur n'est pas heureux.

Comment pouvez-vous permettre à votre script de céder? La nouvelle façon est d'utiliser des travailleurs Web http://www.whatwg.org/ Spécifications / travailleurs Web / travail actuel / . Cela fonctionne en créant un thread séparé pour exécuter votre JS, le fil de thread n'accède pas à la DOM et peut être exécuté simultanément. P>

Cependant, cette nouvelle technologie n'existe pas dans tous les navigateurs. Pour les navigateurs plus anciens, vous pouvez diviser votre travail en l'appelant au script par des délais d'attente. Chaque fois qu'un délai d'attente se produit, le script cède au navigateur pour exécuter ses événements, une fois le navigateur terminé, votre prochain délai d'attente sera déclenché. P>

strong> http://jsfiddle.net/mendesjuan/pucxf/ p> xxx pré>

L'exemple sur Jsfiddle a commenté l'appel synchrone, vous pouvez le remettre pour voir le navigateur de ramper. Notez que l'appel asynchrone prend beaucoup de temps à compléter, mais cela ne provoque pas le message de script à long terme et il vous permet d'interagir avec la page tout en calculant (sélectionnez le texte, les effets sur le bouton). Vous pouvez le voir imprimer des résultats partiels sur le volet en bas à droite. P>

update strong> http://jsfiddle.net/mendesjuan/pucxf/8/ p>

Essayons d'utiliser la fonction de tâche de C-Smile pour implémenter la somme des carrés. Je pense qu'il manque un paramètre, une fonction à rappeler lorsque la tâche est terminée. Utilisation de Task Code> nous permet de créer plusieurs fonctions chuntées sans dupliquer les travaux d'appel de SettimeOUT et de l'itération. P>

/**
 * @param {function} worker. It is passed two values, the current array index, 
 *        and the item at that index
 * @param {array} list Items to be traversed
 * @param {callback} The function to call when iteration is finished;
 * @param {number} maxit The number of iterations of the loop to run 
 *        before yielding, defaults to 1000
 */
function task(worker, list, callback, maxit)
{
  maxit = maxit || 1000; 
  var idx = 0;
  exec_chunk();
  function exec_chunk() 
  {
     for(var n = 0; n < maxit; ++n)
     {
       if(idx >= list.length) {
         callback(); 
         return;
       }
       worker(idx, list[idx]);
       idx++;
     }
     setTimeout(exec_chunk,1);
  }
}


function sumOfSquaresAsync(list, callback) 
{
   var total = 0;

   // The function that does the adding and squaring
   function squareAndAdd(index, item) {
      total += item * item;
      // DOM manipulation to make it take longer and to see progress
      var node = document.createElement("div");
      node.innerHTML = "Async temp value = " + total;
      document.body.appendChild(node);                
   }

   // Let the caller know what the result is when iteration is finished
   function onFinish() {
      callback(total);
   }

   task(squareAndAdd, list, onFinish);

}

var list = [];
for (var i = 0; i < 100000; i++) {
   list.push(Math.random());
}

sumOfSquaresAsync(list, function(total) {
    console.log("Sum of Squares is " + total);        
})

Si votre objectif est de supprimer le message "Kill-Wait" en tant que solution temporaire rapide pour votre JavaScript lent, la solution consiste à ouvrir des outils Outils / développeurs dans Google Chrome et de le garder ouvert et minimisé quelque part sur votre bureau tout en naviguant. < / p>