Question

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

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

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

有什么想法吗？

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

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

问题是，循环没有等待 - 实际命令按预期工作，只是它们一下子就完成了。

感谢任何帮助，谢谢。

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

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

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 ms后的第三个等等。请记住，这是假装它。每个元素实际上都没有等待前一个元素完成。

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

以下是我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();

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

4 个答案: