Блог

Главная - Вопросы по программированию - Альтернатива jQuery для $.each

Альтернатива jQuery для $.each

#jquery #each

#jquery #каждый

Вопрос:

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

Я хотел бы знать, есть ли хорошая альтернатива $.each, например:

 $('ul li').each(function() {
   var singleLi = $(this);
});

как я могу сделать то же самое без наведения курсора мыши, не используя each?

Спасибо.

Комментарии:

1. В вашем коде есть некоторые синтаксические ошибки.

2. Я ставлю под сомнение утверждение о том, что «$.each ()» сам по себе является причиной проблем с производительностью. По моему мнению и опыту, это совсем не так, за исключением некоторых экстремальных ситуаций с производительностью, которые по определению не предполагают «множества различных эффектов jQuery». Вы должны опубликовать пример того, что вы считаете проблемой, и тогда мы сможем помочь разобраться в реальной проблеме.

3. $.each работает медленно. Если вы используете его для больших объемов данных, работает очень медленно.

4. Нет, @Toro, это действительно не так медленно. Да, это медленнее, чем цикл «for», но особенно в современных средах выполнения JavaScript накладные расходы не так уж велики. В вашем примере, например, сколько <li> элементов у вас есть? Если их тысячи и тысяч, то проблема в том, что ваш DOM очень большой, а не в том, что «$.each()» работает медленно.

Ответ №1:

Если вам нужна реальная альтернатива «$.each()», просто используйте цикл «for»:

 var liElements = $('ul li');
for (var i = 0; i < liElements.length;   i) {
  var li = liElements[i];
  // ... lots of various jQuery effects ...
}

Предложения, которые вы можете пропустить «.each ()» и просто использовать напрямую «.hover()», верны, но они упускают суть: эти подпрограммы jQuery в любом случае будут выполнять «.each()» внутренне.

Однако я сомневаюсь, что переключение с «$.each()» на цикл «for» само по себе будет иметь большое значение.

Комментарии:

1. Это должно быть принятым ответом. Вы можете получить тесты, сравнивающие производительность $.each с другими методами цикла здесь: jsperf.com/jquery-each-vs-for-loop/4

2. Я попробовал это вместо $.get, главным образом потому, что это выдавало мне ошибку с $.get. Итак, это сработало идеально. Я настоятельно рекомендую использовать cycle вместо $.get().

Ответ №2:

Точно так же, без each 

 $('#list li').hover(function() {
        $('#myDiv').stop().fadeIn(400);
    }, function() {
        $('#myDiv').stop().fadeOut(400);
    })
});

Комментарии:

1. stop() гарантирует, что оба эффекта не перекрываются.

2. Хотя, возможно, вы захотите использовать .stop(true, true) , в противном случае они просто остановятся и никогда не закончат анимацию, и вы застряли с наполовину выцветшим div.

3. требуется остановка (верно, true)… или это не сработает. Но мой вопрос в другом.

4. Обратите внимание, что код для метода «.hover()» в любом случае будет выполнять «.each()» внутренне …

5. Проголосовал «Против» из-за введения в метод .stop(), поскольку мне всегда было интересно, есть ли способ предотвратить множественные запуски эффектов jQuery, которые выполняются до полного завершения итерации. Я подозреваю, .stop() что это остановит их от этого.

Ответ №3:

ДА… просто добавьте указатель мыши ко всем li

 $('#list li').hover(function() {
    $('#myDiv').fadeIn(400);
}, function() {
    $('#myDiv').fadeOut(400);
});

$('#myDiv').fadeOut(400);

Ответ №4:

Поскольку идентификатор должен быть уникальным, весь этот скрипт не должен изменяться, если .each() будет удален.

$.hover() это мало что значит.

 $('#list li').hover(function() {
    $('#myDiv').fadeIn(400);
}, function() {
    $('#myDiv').fadeOut(400);
});

$('#myDiv').fadeOut(400);