Question

我希望你能快速解决我遇到的问题。我找到了一个有着类似问题的奇怪的人，却无法理解那些显然不会那么困难的事情！

我正在寻找以下代码，等到setTimeout完成后再循环到下一个.each()

$('.someClass').each(function() {
    var thisWindow = $(this);
    var someDelay = someOtherVariable
    setTimeout(function(){
        thisWindow.removeClass('hidden');
        console.log($(this));
    },someDelay);  
});

我假设某种队列会有所帮助，但我绝对不是jQuery专家！我所看到的答案似乎与动画有关，这不是，所以如果我在之前的搜索中遗漏了一些明显的东西，我会道歉。欢呼声。

Answer 1

非常简单。

你需要给一个具有该功能的计数器。这样：

$('.someClass').each(function(i) {
    var thisWindow = $(this);
    var someDelay = 500;
    setTimeout(function(){
        thisWindow.removeClass('hidden');
        console.log($(this));
     },i * someDelay);  
});

使用那个i和最后的小计算，每个元素都会延迟500ms。

所以对于第一次演练：

0 * 500 = 0

第二

1 * 500 = 500

第三

2 * 500 = 1000

等等。

另见fiddle：

问候timotheus！

Answer 2

each循环不会等待setTimeout移动到下一个项目，因为它意味着非阻塞执行几个＆＃34;线程＆＃34; （虽然JS并不是真正的多线程）。

在第一个setTimeout开始触发之前，每个元素都会为列表中的每个元素设置单独的并行计时器。 setTimeout的目的是让调用它的代码不间断地继续执行，并在超时发生时执行第一个参数。

如果要在超时结束时前进到下一个元素，则必须手动执行，而不是使用$.each()。这样，您可以控制执行移动到下一个匹配项目的速率。

您可以迭代匹配集上的每个元素（使用for... in循环）并使用sleep（xxxx）;但是，请注意睡眠将冻结执行，直到延迟结束，因此从用户体验的角度来看，它可能不是您想要的。

Answer 3

您始终可以使用jquery delay()方法：

$.each($('.foo'), function(i, item) {
    $(item).delay(1000 * i).fadeIn();
});

这将每秒淡入下一个.foo元素。

演示：http://jsfiddle.net/m0fxm2Lu/

Answer 4

事实证明，我并不需要为我的特定用途实际阻止.each()循环。我只是跟踪了TotalDelaySoFar＆＃39;并将其添加到每个项目的延迟中，以便它们在正确的时间完成运行。

我最终得到了：

var totalDelay = 0;
$('.someClass').each(function() {
    var thisWindow = $(this);
    var someDelay = totalDelay + someOtherVariable;
    totalDelay += someDelay;
    setTimeout(function(){
        thisWindow.removeClass('hidden');
        console.log($(this));
    },someDelay);  
});

jQuery - 在下次运行.each（）之前等待setTimeout

4 个答案: