javascript - 在循环中使用setTimeout

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

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

我敢肯定，还有一种更简单的方法，我只是没有看到。任何帮助将是巨大的！

最佳答案

使用纯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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>