Javascript 每个循环中的setTimeout（）不'；行不通

我必须做一块板作为一项任务，它会像科幻电影“第三类亲密接触”一样一个接一个地亮起来。这里的主要目标是让特定的块以特定的顺序点亮，它们之间有2秒的间隔这是我现在所做的代码：

$(document).ready(function () {

    var colorBlocks = [
        'yellow',
        'green',
        'blue',
        'white',
        'orange'
    ]

    $.each(colorBlocks, function (i) {
        $('#' + this).css("background", this);
        // When you use the alert you can see the boxes change color one by one
        // alert(something);
    });

});

但这似乎不起作用——它会一次改变所有盒子的颜色，除非你提醒（某件事）

---

有人能帮忙吗

执行设置间隔，每2秒增加一次数字，然后调用显示块的函数。

我想您需要这样的功能：

$.each(colorBlocks, function (i) {
    setTimeout(function() {
        $('#' + this).css("background", this);
    }.bind(this), i * 2000);
});

为什么

i*2000

i是迭代的索引，因此每次调用都将等待

i*2000 ms

，等待下一个“动画”出现。

这应该可以

$(document).ready(function () {
    var colorBlocks = [
        'yellow',
        'green',
        'blue',
        'white',
        'orange'
    ];

    $.each(colorBlocks, function (index, key) {
          var selector = $("#" + key);
          setTimeout(function () {
               selector.css("background", key);
          }.bind(this), index * 2000);
    });
});

---

JSBin:

您是否也可以发布HTML？在每个循环中使用settimeout。将迭代乘以2000毫秒（2秒）。在回调中采取行动。您正在寻找的是我建议您也这样做。它说我必须等待6分钟才能接受您的问题如何让函数继续运行？您的意思是什么？让它一直重新启动@TechEdryan需要重新启动它，所以在它结束后，它会再次运行@Michael