我想在while循环中添加一个delay/sleep:

我是这样试的:

alert('hi');

for(var start = 1; start < 10; start++) {
  setTimeout(function () {
    alert('hello');
  }, 3000);
}

只有第一种情况是正确的:在显示alert('hi')后,它将等待3秒,然后alert('hello')将显示,但随后alert('hello')将不断重复。

我想要的是,在警报('hello')显示3秒后警报('hi'),然后它需要等待3秒的第二次警报('hello'),以此类推。


当前回答

除了10年前接受的答案之外,使用更现代的Javascript,可以使用async/await/Promise()或生成器函数来实现正确的行为。(其他答案中建议的错误行为是设置一系列3秒警报,而不管“接受”警报()-或完成手头的任务)

使用异步/等待/承诺(): alert('嗨'); (async () => { For (let start = 1;起始值< 10;开始+ +){ 等待新的承诺(resolve => setTimeout(() => { alert('你好'); 解决(); }, 3000)); } }) ();

使用生成器函数:

警报(“嗨”); 让函子; (func = (function*() { for(let start = 1, start < 10, start++) { yield setTimeout(() => { 警报(“你好”); func.next(); }, 3000); } })()).next();

其他回答

下面是我用来循环数组的函数:

function loopOnArrayWithDelay(theArray, delayAmount, i, theFunction, onComplete){

    if (i < theArray.length && typeof delayAmount == 'number'){

        console.log("i "+i);

        theFunction(theArray[i], i);

        setTimeout(function(){

            loopOnArrayWithDelay(theArray, delayAmount, (i+1), theFunction, onComplete)}, delayAmount);
    }else{

        onComplete(i);
    }
}

你可以这样使用它:

loopOnArrayWithDelay(YourArray, 1000, 0, function(e, i){
    //Do something with item
}, function(i){
    //Do something once loop has completed
}

我可能会使用setInterval,像这样:

var period = 1000; // ms
var endTime = 10000;  // ms
var counter = 0;
var sleepyAlert = setInterval(function(){
    alert('Hello');
    if(counter === endTime){
       clearInterval(sleepyAlert);
    }
    counter += period;
}, period);

简单实现了在循环运行期间每两秒显示一段文本。

for (var i = 0; i < foo.length; i++) {
   setInterval(function(){ 
     console.log("I will appear every 2 seconds"); 
   }, 2000);
  break;
};

如果使用ES6,你可以使用for循环来实现:

For(令I = 1;I < 10;我+ +){ setTimeout(函数定时器(){ console.log(“hello world”); }, I * 3000); }

它为每次迭代声明i,这意味着超时是+ 1000之前的超时。这样,传递给setTimeout的就是我们想要的。

这是可行的

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

试试这把小提琴:https://jsfiddle.net/wgdx8zqq/