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

How to delay after every iteration in javascript for loop?

本文关键字：迭代 延迟 循环 javascript for      更新时间：2023-09-26

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

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

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

我试过嵌套一个setTimeout，但没有成功，在谷歌上搜索后，我决定在这里问它。

您可以创建一个通用函数，该函数允许您以超时间隔进行循环。"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：超时间隔(毫秒(
  • func：执行每次迭代的函数("i"作为唯一参数传递(

示例用法：

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

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

相关文章：