javascript - 循环延迟 jquery / js

Question

我有红绿灯 - 3 种颜色：

<div class="green" id="ready"></div>
<div class="orange" id="steady"></div>
<div class="red" id="go"></div>

和数组：

var status = ["ready", "steady", "go"];

我想在无限循环中添加和删除类（模仿闪烁），但有一些延迟，但这段代码一次性完成。我该如何解决？

jQuery.each(status, function() {
    setTimeout(function() {
        $("#" + this).addClass('active');
    }, 3000);
});

Answer 1

http://jsfiddle.net/9feh7/

您正在将所有内容设置为一次运行。每次乘以索引。

$('#ready, #steady, #go').each(function(i) { 
    var el=$(this);
    setTimeout(function() { 
        el.addClass('active');
    }, i * 3000); 
});

请注意，i在第一个实例中为 0，因此如果您希望 #ready 等待 3 秒，请使用(i+1) * 3000

此外，$('#'+this)它的语法不正确，$(this)但它在 setTimeout 内不起作用。

使用setInterval而不是setTimeout运行无限（除非清除）循环。

Answer 2

尝试这个：

var status = ["ready", "steady", "go"];
var i=1;
jQuery(status).each(function(index,value) {
    var self=this;
    setTimeout(function() {
       $(self).addClass('active');
    }, 3000*i);
    i++;
});

小提琴：http: //jsfiddle.net/M9NVy/

Answer 3

我会说你最好为你的最终目标链接。

1）设置红色功能。在红色功能调度黄色结束时设置超时 1000 毫秒。2）在黄色计划结束时，红色有 1000 毫秒超时

3) 在绿灯计划结束时，绿灯超时 1000 毫秒。

4) 通过调用 red() 开始你的代码

现在它将无限循环，而不会增加超时时间。

如果你讨厌这样，那么我会使用 setInterval 而不是 setTimeOut 但你可能需要更多的数学。