在循环中使用 setTimeout

Question

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

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

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

Answer 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;
}

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

在循环中使用 setTimeout

Using setTimeout in a Loop

javascript

jquery

loops

settimeout