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

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

我在页面上有一个未知数量的元素，我需要一次循环一个并执行操作。 但是，我需要循环暂停，直到元素上使用的函数完成，然后继续下一次迭代。

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

有任何想法吗？

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

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

问题是，循环不等待 – 实际命令按预期工作，只是它们一次全部消失。

任何帮助表示感谢，谢谢。

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

EDIT2：从那以后得到了1.4.2 jQuery lib，使用的是1.3.2，因此自定义了wait（）函数。 现在使用lobstrosity提到的delay（）。 管理从他的答案拼凑一些接近我需要的东西，谢谢lobstrosity :)。

Answer 1

首先，jQuery 1.4添加了延迟函数，我假设这是您的自定义等待实现正在执行的操作。

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

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

所以第一个元素会立即淡出。 第二个将在5,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')}); 

这样，fadeOut在fadeIn完成之前不会启动。

Answer 4

这是我的解决方案的演示。

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

 // 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();