在循环中使用 setTimeout

【问题标题】：Using setTimeout in a Loop在循环中使用 setTimeout
【发布时间】：2015-09-13 02:49:27
【问题描述】：

function showColors() {
  $.each(colorList, function(value) {
    setTimeout(function(){
      revealColor(colorList[value]);
    }, 1000);
  });
}

我基本上是在尝试在这里进行设置，以便revealColor 函数每1000 毫秒运行一次，直到我到达整个colorList 数组的末尾。不幸的是，它立即将所有 setTimeout 事件排队，然后在 1000 毫秒后，revealColor 函数对数组中的每个值运行一次。

我确信有一种更简单的方法可以做到这一点，我只是没有看到。任何帮助都会很棒！

【问题讨论】：

标签： javascript jquery loops settimeout

【解决方案1】：

使用纯JS：

var colorList = ["red", "green", "blue"];

var colorIndex = 0;

var handler = setInterval(function() {
    revealColor(colorList[colorIndex]);
    colorIndex++;
    if (colorIndex >= colorList.length) {
        clearInterval(handler);
    }
}, 1000);

function revealColor(color) {
    document.body.style.background = color;
}

使用 jQuery：

var colorList = ["red", "green", "blue"];

var delay = 1000;

$.each(colorList, function (value) {
    setTimeout(function () {
        revealColor(colorList[value]);
    }, delay);
    delay += 1000;
});

function revealColor(color) {
    document.body.style.background = color;
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

这太完美了！增加循环的每一次通过的延迟允许它具有所需的行为。谢谢！