在for循环中使用setTimeout()无效。

Question

我需要完成一个作业，制作一个像科幻电影“第三类接触”中那样逐个点亮的板子。主要目标是让特定的块按特定顺序点亮，并且它们之间有两秒的间隔。这是我现在所做的代码：

$(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);
    });

});

但是这似乎不起作用，它会改变所有方框的颜色，除非你警告(alert)（某些东西）;

有人能帮忙吗？

- RyanM

---

你能同时发布HTML吗？ - Thangaraja

在你的每个循环中使用settimeout。将迭代乘以2000毫秒（2秒）。在回调函数中执行操作。 - Travis J

你要找的是 setInterval()。 - Patrick Motard

Answer 1

我认为你想要类似这样的东西：

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

为什么是 i * 2000？

i 是迭代的索引，所以每次调用等待下一个“动画”发生的时间为 i * 2000 毫秒。

- baao

---

这也是我建议做的。 - Travis J

它说我必须等待6分钟才能接受你的问题。 - RyanM

我该如何让函数持续运行？ - RyanM

你的意思是什么？让它一直重新启动吗？@techedryan - baao

它确实有作用，只是在 fiddle 中不可见。你能否尝试使用你的实际代码来这样做呢？问题在于所有的 div 在 fiddle 中已经有了它们的背景颜色。你可以将它们的背景再次设置为透明，以便更频繁地看到动画效果。 - baao

Answer 2

这应该可以工作

$(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: https://jsbin.com/gilemuzade/1/edit

JSBin：https://jsbin.com/gilemuzade/1/edit

- JazzCat

Answer 3

执行 setInterval 并每 2 秒增加一次数字，然后调用显示您区块的函数。

- Medda86