jQuery的$.each方法的替代方案

Question

我发现$.each非常慢，如果包含大量不同的jQuery效果，会对网页造成问题。

我想知道是否有一个很好的替代方法来代替$.each，例如：

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

没有hover，我怎么才能不使用each实现相同的效果呢？

谢谢。

- Andrea Turri

---

你的代码存在一些语法错误。 - Felix Kling

我对"$ .each()"本身是性能问题的说法表示怀疑。在我看来和经验中，除了一些极端性能情况（这些情况本质上不涉及“大量各种jQuery效果”），它根本不会引起性能问题。你应该发表一个你认为有问题的例子，然后我们可以帮助找出真正的问题。 - Pointy

$.each很慢。如果你用它处理大量数据，速度会非常慢。 - Andrea Turri

不，@Toro，它真的不是那么慢。 是的，它比“for”循环慢，但特别是在现代JavaScript运行时中，开销并不是那么大。 例如，在您的示例中，有多少个<li>元素？ 如果有成千上万个，那么问题在于您的DOM非常大，而不是“$.each（）”很慢。 - Pointy

Answer 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”循环并不能产生多大的差异。

- Pointy

---

这应该是被接受的答案。你可以在这里获取有关$.each和其他循环方法性能比较的基准测试：http://jsperf.com/jquery-each-vs-for-loop/4 - SharkAlley

我尝试了这个方法，而不是使用$.get，主要是因为$.get给我报错了。所以这个方法完美地解决了问题。我强烈推荐使用for循环代替$.get()。 - GSquadron

Answer 2

不使用each的完全相同方法

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

- Naveed Ahmad

---

stop() 会确保两个效果不重叠。 - Naveed Ahmad

尽管您可能想使用.stop(true, true)，否则它们只会停止并永远不会完成动画，您会陷入一个半透明的div。 - Code Maverick

需要加入停止(true,true)...否则它无法工作。但我的问题不同。 - Andrea Turri

请注意，".hover()" 方法的代码将在内部执行 ".each()"。 - Pointy

因为介绍了.stop()方法，我点了赞，因为我一直想知道是否有一种方法可以防止多次触发运行到完全迭代的jQuery效果。我猜测.stop()会阻止它们这样做。 - Alexander Dixon

Answer 3

是的...只需将悬停效果添加到所有li即可

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

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

- Naftali

Answer 4

作为一个ID必须是唯一的，如果移除了.each()，整个脚本不应该发生改变。 $.hover() 没有太多意义。

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

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

- Orbling