jQuery 的 .each() 方法是并行还是顺序运行其语句？答案

【问题标题】：Does jQuery's .each() method run its statements in parallel or sequentially?jQuery 的 .each() 方法是并行还是顺序运行其语句？
【发布时间】：2016-05-16 00:31:42
【问题描述】：

在我的 HTML 页面中，我有 4 个列表项和以下 jQuery 代码：

$('li').hide().each(function() {
    $(this).delay(500).fadeIn(1000);
});

我假设 .each() 函数内的语句将针对第一个列表项运行，完成然后针对第二个列表项运行，等等。

但是，所有四个列表项会同时淡入。这是否意味着该语句对所有列表项并行运行？

有没有办法让列表项一次淡入一个？

【问题讨论】：

标签： jquery each

【解决方案1】：

由于动画是异步的，循环不会等待每个动画完成，然后继续下一次迭代

循环将在几毫秒内完成，因此每个项目将具有相同的视觉延迟。

要递增，最简单的方法是使用循环索引作为乘数，这样可以有效地将它们全部交错

$('li').hide().each(function(i) {
    // "i" is array index of current instance
    // delays will thus be 0*500 ... 1*500 .... n*500
    $(this).delay(i*500).fadeIn(1000);
});

【讨论】：

第一次迭代时i 会是0 导致0 在i*500 的乘积，而不是500 的预期延迟？

【解决方案2】：

它们确实按顺序运行，您的示例只是因为您使用了延迟/淡入淡出而产生了它们同时运行的错觉。您要做的是链接每个元素上的淡入淡出，以便下一个元素仅在前一个元素完成后才会淡出。你可以这样做：

    $(this).delay(500).fadeIn(1000, function () {
        // Fade the next li...
    });

当然，这不适用于您上面的特定代码示例（您可能希望摆脱 .each 并在完整的回调函数中以不同的方式获取每个 li 元素）

【讨论】：

在不使用循环的情况下很难扩展很多项目

【解决方案3】：

可以使用.queue()、.dequeue()、.next()依次调用函数

$("li").hide().queue(function() {
  $(this).delay(500).fadeIn(1000, $.proxy($.fn.dequeue, $(this).next()))
}).first().dequeue()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
</ul>

【讨论】：