Как добавить задержку в цикле JavaScript? - PullRequest
Новая
       102

Как добавить задержку в цикле JavaScript?

298 голосов
/ 27 августа 2010

Я хотел бы добавить задержку / сон внутри цикла while:

Я попробовал это так: 

alert('hi');

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

Только первый сценарий верен: после отображения alert('hi') он будет ждать 3 секунды, затем будет отображаться alert('hello'), но затем постоянно будет повторяться alert('hello').

Мне бы хотелось, чтобы после alert('hi') через 3 секунды показывалось alert('hello'), затем нужно подождать 3 секунды во второй раз alert('hello') и т. Д.

Ответы [ 24 ]

0 голосов
/ 03 ноября 2015

Попробуйте это 

//the code will execute in 1 3 5 7 9 seconds later
function exec(){
  for(var i=0;i<5;i++){
   setTimeout(function(){
     console.log(new Date());   //It's you code
   },(i+i+1)*1000);
  }
}
0 голосов
/ 02 июня 2015

Вот функция, которую я использую для цикла по массиву: 

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
}
0 голосов
/ 24 февраля 2019

Насколько мне известно, функция setTimeout вызывается асинхронно.То, что вы можете сделать, это обернуть весь цикл в асинхронную функцию и ждать Promise, который содержит setTimeout, как показано: 

var looper = async function () {
  for (var start = 1; start < 10; start++) {
    await new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log("iteration: " + start.toString());
        resolve(true);
      }, 1000);
    });
  }
  return true;
}

И затем вы вызываете запустить его так: 

looper().then(function(){
  console.log("DONE!")
});

Пожалуйста, уделите некоторое время, чтобы получить хорошее представление об асинхронном программировании.

0 голосов
/ 19 марта 2016

Этот скрипт работает для большинства вещей 

function timer(start) {
    setTimeout(function () { //The timer
        alert('hello');
    }, start*3000); //needs the "start*" or else all the timers will run at 3000ms
}

for(var start = 1; start < 10; start++) {
    timer(start);
}
Страница:
...