如何在jQuery中编写一个循环，在继续循环之前等待每个函数完成

Question

如果这是显而易见的，请原谅我。

我的页面上有未知数量的元素，我需要一次遍历一个元素并对其进行处理。但是，我需要暂停循环，直到元素上使用的函数完成，然后继续进行下一次迭代。

我尝试在 $.each 循环中执行此操作，但它会快速触发命令并完成，而无需等待它们完成。

有什么想法吗？

$('elem').each(function(){
    $(this).fadeIn().wait(5000).fadeOut();
});

这就是我所拥有的，非常简单。 我从这里得到了 wait() 函数：jquery cookbook site。

问题是，循环不等待 - 实际的命令按预期工作，只是它们都立即关闭。

任何帮助表示赞赏，谢谢。

编辑：执行此操作后，我可能想再次执行循环，以便元素列表将再次按顺序淡入/淡出

EDIT2：已经获得了 1.4.2 jQuery 库，使用的是 1.3.2，因此使用了自定义 wait() 函数。现在使用 lobstrosity 提到的 delay() 。 设法从他的回答中拼凑出一些接近我需要的东西，谢谢 lobstrosity :)。

Answer 1

首先，jQuery 1.4 添加了delay 函数，我认为这是您的自定义等待实现正在做的事情。

使用延迟，您可以通过使用每个回调的第一个参数作为初始延迟的乘数来假装每个元素“等待”前一个元素完成的功能。像这样：

var duration = 5000;

$('elem').each(function(n) {
    $(this).delay(n * duration).fadeIn().delay(duration).fadeOut();
});

所以第一个元素会立即淡入。第二个将在 5,000 毫秒后淡入。 10,000 毫秒后的第三个，依此类推。请记住，这是伪造的。每个元素实际上并没有等待前一个元素完成。

Answer 2

您使用each() 的主循环将在您的元素集合上运行而不会延迟。您需要将这些元素排队。

这可能需要调整（并且可能使用 jQuery 队列？），但要演示使用递归来处理队列：

function animate(elems) {
    var elem = elems.shift();
    $(elem).fadeIn().wait(5000).fadeOut(2000, function() {
        if (elems.length) {
            animate(elems);
        }
    });
}

var elems = $('elem');
animate(elems);

Answer 3

您可能需要在第一个函数之前调用 wait ：

  $(this).wait().fadeIn().wait(5000).fadeOut();

另一种选择是使用回调。

 $(this).wait().fadeIn('slow', function(){$(this).fadeOut('slow')});

这样，在fadeIn 完成之前，fadeOut 不会开始。

Answer 4

这是我的solution 的演示。

您需要的不是处理处理的循环。你想要的是链接调用。似乎可能有一种更简单的方法，但这是一种蛮力方法。

// Create a function that does the chaining.
function fadeNext(x,y) {
  return function() { x.fadeIn(100).delay(100).fadeOut(1000, (y?y.fadeNext:y)); };
}

// Get all the elements to fade in reverse order.
var elements = [];
$('.f').each(function(i,e) {elements.unshift(e);});

// Iterate over the elements and configure a fadeNext for each.
var next;
for (var i in elements) {
  var e = $(elements[i]);
  e.fadeNext = fadeNext(e,next);
  next = e;
}

// Start the fade.
next.fadeNext();