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

时间:2013-01-20 22:30:01

标签: javascript loops for-loop settimeout sleep

  

可能重复:
  How do I add a delay in a JavaScript loop?

如何在javascript for循环中完成每次迭代(或之前)之后延迟?这是我的代码,但是一旦它移动到列表中的下一个颜色之前设置了颜色,我需要让它“睡眠”6秒。

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

我尝试过嵌套一个setTimeout,但是无法正常工作,在google搜索之后,我决定在这里问一下。

2 个答案:

答案 0 :(得分:2)

您可以创建一个通用函数,允许您以超时间隔循环。你通常在“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);
}
  • :递增变量
  • max :循环次数
  • 间隔:以毫秒为单位的超时间隔
  • func :执行每次迭代的函数(“i”作为唯一参数传递)

使用示例:

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

答案 1 :(得分:1)

您可以使用.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