jQuery 的 .each() 方法是并行还是按顺序运行其语句?

问题描述：

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

In my HTML page I have 4 list items and the following jQuery code:

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

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

I assumed that the statement inside the .each() function would run for the first list item, would be completed and then run for the second list item etc.

然而，所有四个列表项同时淡入.这是否意味着该语句对所有列表项并行运行?

However, all four list items fade in at exactly the same time. Does this mean that the statement runs in parallel for all of the list items?

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

Is there a way to get the list items to fade in one at a time?

答

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

Since the animations are asynchronous, the loop doesn't wait for each to complete before continuing to next iteration

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

The loop will complete in just a few milliseconds so each item will have same visual delay.

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

To increment, the easiest is to use the loop index as multiplier so effectively they will all be staggered

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

jQuery 的 .each() 方法是并行还是按顺序运行其语句?

相关推荐