如何在javascript for循环中的每一次迭代后延迟？

Question

可能重复： 如何在JavaScript循环中添加延迟？

在javascript for循环中的每一次迭代(或之前)完成之后，如何延迟呢？这是我的代码，但我需要让它‘睡眠’6秒，一旦它设置了颜色，然后再转到列表中的下一个。

for (i = 0; i < switchers.length; i++) {
    $('#switchers ol li:nth-child(' + (i+1) + ')').css('color', 'green');
}

我曾经尝试过嵌套一个setTimeout，但这是行不通的，在搜索完谷歌之后，我决定在这里问一问。

Answer 1

您可以创建一个泛型函数，它允许您使用超时间隔循环。您通常在"for“循环中拥有的代码将进入作为最后一个参数传入的函数中。

如下所示：

var loopTimeout = function(i, max, interval, func) {
    if (i >= max) {
        return;
    }

    // Call the function
    func(i);

    i++;

    // "loop"
    setTimeout(function() {
        loopTimeout(i, max, interval, func);
    }, interval);
}

• i：递增变量
• max：循环多少次
• interval ：ms中的超时间隔
• func：用于执行每次迭代的函数("i“作为唯一的参数传递)

示例用法：

loopTimeout(0, switchers.length, 6000, function(i){
    $('#switchers ol li:nth-child(' + (i+1) + ')').css('color', 'green');    
});

Answer 2

您可以使用.each()。

// timeout, in milliseconds to delay each iteration
var actionTimeout = 6000;

$('#switchers ol li').each(function(i, li) {
    setTimeout(function() {
        $(li).css('color', 'green');
    }, i * actionTimeout);
});

JSFiddle