JQuery нужна помощь - бесконечная петля?

Question

у меня есть проблемы с этим кодом:

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 />'); 
      } 
     } 
    }); 

Это вызывает то и светлячок в всплывающее окно с предупреждением «Остановка выполнения этого сценария». Но это происходит только при очень большом количестве данных на странице. Есть идеи, как это исправить?

Answer 1

Ваш код должен выглядеть следующим образом:

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 />'); 
} 

Там нет причин для второго цикла, чтобы быть внутри первых - это будет просто вызывать много ненужной работы.

Вы можете сделать этот код немного проще, удалив par массив, а второй цикл, а просто создание контента внутри первого цикла:

$('.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

Браузеры запустить все JavaScript (и наиболее страница взаимодействия) на один поток. Когда вы запускаете такой длинный цикл без прерываний, пользовательский интерфейс полностью заморожен. Вы должны попытаться сделать свой алгоритм меньше, но в случае, если это невозможно, вы можете использовать этот трюк, где выполняете небольшую работу, затем приостановите работу и немного измените управление браузером для потока пользовательского интерфейса, затем выполните дополнительную работу ,

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

Это делает одну итерацию вашей петли в функции перед уступкой. Возможно, неплохо было бы сделать больше, чем один в вызове функции, но вы можете поэкспериментировать с этим. Статья об этой идее: http://www.julienlecomte.net/blog/2007/10/28/