Aide Jquery nécessaire boucle infinie?

Question

i ont un problème avec ce code:

var par = []; 
    $('a[name]').each(function() { 
     if (($(this).attr('name')).indexOf("searchword") == -1) { 
      par.push($(this).attr('name')); 
      $('.content').empty(); 
      for (var i = 0; i < par.length; i++) { 
       $(".content").append('<a id="par" href="#' + par[i] + '">' + par[i] + '</a><br />'); 
      } 
     } 
    }); 

Il provoque IE et Firefox pour faire apparaître la fenêtre d'avertissement « Arrêtez l'exécution de ce script ». Mais cela n'arrive que lorsqu'il y a une très grande quantité de données sur la page. Des idées comment résoudre ce problème?

Answer 1

Votre code devrait ressembler à ceci:

var par = []; 
$('a[name]').each(function() { 
    if (($(this).attr('name')).indexOf("searchword") == -1) { 
     par.push($(this).attr('name')); 
    } 
}); 
$('.content').empty(); 
for (var i = 0; i < par.length; i++) { 
    $(".content").append('<a id="par" href="#' + par[i] + '">' + par[i] + '</a><br />'); 
} 

Il n'y a aucune raison pour que la deuxième boucle à être à l'intérieur du premier - qui va juste faire beaucoup de travail inutile.

Vous pouvez faire ce code un peu plus simple en supprimant le tableau par et la seconde boucle, et en créant simplement le contenu dans la première boucle:

$('.content').empty(); 
$('a[name]').each(function() { 
    var name = $(this).attr('name'); 
    if (name.indexOf("searchword") == -1) { 
     $(".content").append('<a id="par" href="#' + name + '">' + name + '</a><br />'); 
    } 
}); 

Answer 2

navigateurs fonctionnent tous javascript (et l'interaction la plus page) sur un seul fil. Lorsque vous exécutez une longue boucle sans interruptions, l'interface utilisateur est totalement gelée. Vous devriez essayer de faire en sorte que votre algorithme fasse moins, mais dans le cas contraire, vous pouvez utiliser cette astuce pour faire un peu de travail, puis mettre en pause et donner un peu de contrôle au navigateur. .

var $targets = $('a[name]'); 
var current = 0; 
var i = 0; 
function doSomeWork() { 
    if (i == $targets.length) return; 

    var $t = $targets[i]; 
    if (($t.attr('name')).indexOf("searchword") == -1) { 
     par.push($t.attr('name')); 
     $('.content').empty(); 
     for (var i = 0; i < par.length; i++) { 
      $(".content").append('<a id="par" href="#' + par[i] + '">' + par[i] + '</a><br />'); 
     } 
    } 
    i++; 
    window.setTimeout(arguments.callee, 0); 
} 

Cela fait une itération de votre boucle dans une fonction avant de céder. Cela peut être une bonne idée d'en faire plus qu'une seule dans un appel de fonction, mais vous pouvez expérimenter avec cela. Un article sur cette idée: http://www.julienlecomte.net/blog/2007/10/28/