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来运行infinate（除非已清除）循环。

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）在黄色计划结束时1000ms超时红色

3）绿色计划结束时绿色超时1000ms。

4）通过调用red（）

启动代码

现在它会无限循环而没有超时的尴尬。

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

循环延迟jquery / js

3 个答案: