JavaScript:For带超时的循环

我希望不要立即执行for循环，而是在每次迭代后等待超时。例如：

for(var i=0; i<10; i++) {
    console.log(i);
    //wait for 1000
}

for（var i=0；i这是有效的：

function initiateTimeOut(i) {
  setTimeout(function() { doStuff(i) }, 30);
}
function doStuff(i) {
    console.log(i);
    i++;
    if (i <= 10) {
        initiateTimeOut(i); 
    }
}

initiateTimeOut(0);

你可以用简单的数学计算出来：

for (var i=0;i<=10;i++) {
   (function(ind) {
       setTimeout(function(){console.log(ind);}, 1000 + (3000 * ind));
   })(i);
}

for（var i=0；i这是一个具有简单超时的解决方案…可能它与您期望的不完全匹配，但在我的建议中，尝试使用javascript进行“暂停”不是一个好方法。我建议您搜索其他方法来做您想要的事情

为什么不使用这样的东西：

var i = 0
var id = window.setInterval(function(){
    if(i >= 10) {
        clearInterval(id);
        return;
    }

    console.log(i);
    i++;
}, 1000)

// utility function to call a callback numTimes, 
// separated by delay milliseconds
function runIteration(fn, numTimes, delay) {
    var cnt = 0;
    function next() {
        // call the callback and stop iterating if it returns false
        if (fn(cnt) === false) return;
        ++cnt;
        // if not finished with desired number of iterations,
        // schedule the next iteration
        if (cnt < numTimes) {
            setTimeout(next, delay);
        }
    }
    // start first iteration
    next();

}

for (let i=0; i<=10; i++) {
    setTimeout(() => {console.log(i);}, 1000 * i);
}

你可以用两种方法来处理你的处境

您可以立即安排一系列不同时间的
setTimeout（）
调用，以便它们在将来的所需时间执行（这里的其他答案说明了如何执行）

您可以执行第一次迭代，安排下一次迭代，然后再安排下一次迭代的执行，直到完成所需的迭代次数。这最终比设置大量的
setTimeout（）更具可伸缩性
调用并为您提供更多分支/逻辑自由，因为您可以控制每次迭代后接下来发生的事情

使用更通用的实用程序函数的第二个选项如下所示：

var i = 0
var id = window.setInterval(function(){
    if(i >= 10) {
        clearInterval(id);
        return;
    }

    console.log(i);
    i++;
}, 1000)

// utility function to call a callback numTimes, 
// separated by delay milliseconds
function runIteration(fn, numTimes, delay) {
    var cnt = 0;
    function next() {
        // call the callback and stop iterating if it returns false
        if (fn(cnt) === false) return;
        ++cnt;
        // if not finished with desired number of iterations,
        // schedule the next iteration
        if (cnt < numTimes) {
            setTimeout(next, delay);
        }
    }
    // start first iteration
    next();

}

for (let i=0; i<=10; i++) {
    setTimeout(() => {console.log(i);}, 1000 * i);
}

工作演示：

这也可以通过第二个回调函数进行扩展，该函数在迭代完成时调用（在某些情况下很有用），或者它可以返回一个在迭代完成时解析的承诺

以下是返回承诺的版本的外观：

//调用回调numTimes的实用函数，
//以延迟毫秒分隔
函数运行迭代（fn，numTimes，delay）{
var d=$.Deferred（）；
var-cnt=0；
函数结束（）{
d、 解决（）；
}
函数next（）{
//如果需要，调用回调并停止迭代
//它返回false
如果（fn（cnt）==false）{
end（）；
返回；
}
++碳纳米管；
//如果未完成所需的迭代次数，
//安排下一次迭代
如果（cnt
不要在循环中生成函数，而是：


（函数五秒（n）{
if（n<5）setTimeout（函数（）{
五秒（n）；//如果n<5则重做（并通过n）
}, 1000);
console.log（n++）；
}（0））；//Initialize.n为0
这里的大多数答案都是完全错误的

如果您想等待每个迭代完成，那么您就不想使用for循环，这是一个错误的开始策略

您需要使用计数器和计数器限制，否则它将无休止地循环

以下是解决方案：

var optionLimit = 11;
var optionItem = 1;
function do_something_else() {
    if (optionItem < optionLimit) {
        console.log('doing stuff:' + optionItem)
        optionItem++
        dostuff();
    } else {
        console.log('no more stuff to do already reached:' + optionItem)
    }
}
function dostuff(started) {
    if (started) {
        console.log('started doing something');
    } else {
        console.log('find something else to do');
    }
    setTimeout(function () {
        do_something_else();
    }, 3000);
}
dostuff('started doing something');

var optionLimit=11；
var optionItem=1；
函数do_something_else（）{
if（optionItem

如果您有一组需要索引的项，那么您可以使用循环来计算需要执行的项的数量，如下所示：

var thingstodo = [
    thing1 = {
        what: 'clean room',
        time: 8000
    },
    thing2 = {
        what: 'laundry',
        time: 9000
    },
    thing3 = {
        what: 'take out trash',
        time: 6000
    },
    thing4 = {
        what: 'wash dishes',
        time: 10000
    }
]
var optionLimit = 0;
// find how many things to do from things to do list
function get_things_todo(time) {
    console.log('heres stuff i can do');
    console.log('====================');
    for (var i = 0; i < thingstodo.length; i++) {
        val = thingstodo[i];
        console.log(JSON.stringify(val.what));
        optionLimit++
    }
    setTimeout(function () {
        startdostuff(3000)
    }, time);
}
var optionItem = 0;
// find the next thing to do on the list
function get_next_thing(time) {
    setTimeout(function () {
        console.log('================================');
        console.log('let me find the next thing to do');
    }, time);
    setTimeout(function () {
        if (optionItem < optionLimit) {            
            val = thingstodo[optionItem];            
            dostuff(3000, val);
            optionItem++
        } else {
            console.log('=====================================================');
            console.log('no more stuff to do i finished everything on the list')
        }
    }, time*1.5);
}
//do stuff with a 3000ms delay
function dostuff(ftime, val) {
    setTimeout(function () {
        console.log('================================');
        console.log('im gonna ' + JSON.stringify(val.what));
        console.log('will finish in: ' + JSON.stringify(val.time) + ' milliseconds');
        setTimeout(function () {
            console.log('========');
            console.log('all done');
            get_next_thing(3000);
        }, val.time);
    }, ftime);
}
//start doing stuff
function startdostuff(time) {
    console.log('========================');
    console.log('just started doing stuff');
    setTimeout(function () {
        get_next_thing(3000);
    }, time);
}
/// get things to first
get_things_todo(3000);

var thingstodo=[
事情1={
什么：'洁净室'，
时间：8000
},
事物2={
什么：“洗衣店”，
时间：9000
},
事情3={
什么：“倒垃圾”，
时间：6000
},
事情4={
什么：‘洗碗’，
时间：10000
}
]
var optionLimit=0；
//从待办事项列表中找出有多少事情要做
函数get\u things\u todo（时间）{
log（'这是我能做的事'）；
console.log（'========================='）；
for（var i=0；i
这里有一个
es6
解决方案。我真的不喜欢将
setTimeout
包装成
// utility function to call a callback numTimes, 
// separated by delay milliseconds
function runIteration(fn, numTimes, delay) {
    var cnt = 0;
    function next() {
        // call the callback and stop iterating if it returns false
        if (fn(cnt) === false) return;
        ++cnt;
        // if not finished with desired number of iterations,
        // schedule the next iteration
        if (cnt < numTimes) {
            setTimeout(next, delay);
        }
    }
    // start first iteration
    next();

}

runIteration(function(i) {
    console.log(i);
}, 10, 1000);

// utility function to call a callback numTimes, 
// separated by delay milliseconds
function runIteration(fn, numTimes, delay) {
    var d = $.Deferred();
    var cnt = 0;

    function end() {
        d.resolve();
    }

    function next() {
        // call the callback and stop iterating if
        // it returns false
        if (fn(cnt) === false) {
            end();
            return;
        }
        ++cnt;
        // if not finished with desired number of iterations,
        // schedule the next iteration
        if (cnt < numTimes) {
            setTimeout(next, delay);
        } else {
            end();
        }
    }
    // start first iteration
    next();
    return d.promise();
}


runIteration(function(i) {
    log(i);
}, 10, 1000).done(function() {
    log("done");
});

var optionLimit = 11;
var optionItem = 1;
function do_something_else() {
    if (optionItem < optionLimit) {
        console.log('doing stuff:' + optionItem)
        optionItem++
        dostuff();
    } else {
        console.log('no more stuff to do already reached:' + optionItem)
    }
}
function dostuff(started) {
    if (started) {
        console.log('started doing something');
    } else {
        console.log('find something else to do');
    }
    setTimeout(function () {
        do_something_else();
    }, 3000);
}
dostuff('started doing something');

var thingstodo = [
    thing1 = {
        what: 'clean room',
        time: 8000
    },
    thing2 = {
        what: 'laundry',
        time: 9000
    },
    thing3 = {
        what: 'take out trash',
        time: 6000
    },
    thing4 = {
        what: 'wash dishes',
        time: 10000
    }
]
var optionLimit = 0;
// find how many things to do from things to do list
function get_things_todo(time) {
    console.log('heres stuff i can do');
    console.log('====================');
    for (var i = 0; i < thingstodo.length; i++) {
        val = thingstodo[i];
        console.log(JSON.stringify(val.what));
        optionLimit++
    }
    setTimeout(function () {
        startdostuff(3000)
    }, time);
}
var optionItem = 0;
// find the next thing to do on the list
function get_next_thing(time) {
    setTimeout(function () {
        console.log('================================');
        console.log('let me find the next thing to do');
    }, time);
    setTimeout(function () {
        if (optionItem < optionLimit) {            
            val = thingstodo[optionItem];            
            dostuff(3000, val);
            optionItem++
        } else {
            console.log('=====================================================');
            console.log('no more stuff to do i finished everything on the list')
        }
    }, time*1.5);
}
//do stuff with a 3000ms delay
function dostuff(ftime, val) {
    setTimeout(function () {
        console.log('================================');
        console.log('im gonna ' + JSON.stringify(val.what));
        console.log('will finish in: ' + JSON.stringify(val.time) + ' milliseconds');
        setTimeout(function () {
            console.log('========');
            console.log('all done');
            get_next_thing(3000);
        }, val.time);
    }, ftime);
}
//start doing stuff
function startdostuff(time) {
    console.log('========================');
    console.log('just started doing stuff');
    setTimeout(function () {
        get_next_thing(3000);
    }, time);
}
/// get things to first
get_things_todo(3000);

for (let i=0; i<=10; i++) {
    setTimeout(() => {console.log(i);}, 1000 * i);
}

    function iAsk(lvl){
        var i=0;
        var intr =setInterval(function(){ // start the loop 
            i++; // increment it
            if(i>lvl){ // check if the end round reached.
                clearInterval(intr);
                return;
            }
            setTimeout(function(){
                $(".imag").prop("src",pPng); // do first bla bla bla after 50 millisecond
            },50);
            setTimeout(function(){
                 // do another bla bla bla after 100 millisecond.
                seq[i-1]=(Math.ceil(Math.random()*4)).toString();
                $("#hh").after('<br>'+i + ' : rand= '+(Math.ceil(Math.random()*4)).toString()+' > '+seq[i-1]);
                $("#d"+seq[i-1]).prop("src",pGif);
                var d =document.getElementById('aud');
                d.play();                   
            },100);
            setTimeout(function(){
                // keep adding bla bla bla till you done :)
                $("#d"+seq[i-1]).prop("src",pPng);
            },900);
        },1000); // loop waiting time must be >= 900 (biggest timeOut for inside actions)
    }

for (var i=1; i<6; i++) (function(t) {
    setTimeout(function() {
    //do anything with t
    }, t*1000)
}(i))

const steps = function*() {
  for (let i=0; i<10; i++) {
    yield i;
  }
}

const step = steps();
setInterval(function(){ 
    console.log(step.next().value)
}, 1000);