Создайте паузу внутри цикла while в javascript

Я хотел бы создать паузу внутри цикла while, чтобы я мог создавать n анимаций, которые появляются каждые 3 секунды после другого.

Я пробовал следующее, но это не работает. Хотел бы, чтобы кто-то показал мне, что я делаю неправильно. Спасибо!!

i=0;
while (i < n) {
    someanimation();
    setTimeout(function(){
        i++;
    }, 3000);

};

Ответы

Ответ 1

setTimeout не останавливается; он запрашивает Javascript для запуска другого кода позже.

Googling для цикла setTimeout сообщает вам именно то, что вам нужно знать. Если вы немного оглядитесь, он даже упоминает setInterval. Разница: использование setTimeout в цикле будет ждать 3 секунды между циклами, в то время как setInterval заставит его занять 3 секунды для цикла (включая сколько времени занимает анимация, если она меньше 3 секунд:)). Кроме того, setInterval создает бесконечный цикл, который вам нужно будет выполнить после необходимого количества раз; setTimeout требует, чтобы вы сами построили цикл.

i = 0;

function animation_loop() {
  someAnimation();
  setTimeout(function() {
    i++;
    if (i < n) {
      animation_loop();
    }
  }, 3000);
};
animation_loop();

i = 0;
someAnimation();
setInterval(function() {
  i++;
  if (i < n) {
    someAnimation();
  }
}, 3000);

Ответ 2

setTimeout немного сложнее, потому что он не блокируется (т.е. он не дожидается ожидания таймаута, прежде чем продолжить с программой).

То, что вы хотите, ближе к этому:

var i = 0;
function nextFrame() {
    if(i < n) {
        someanimation();
        i++;
        // Continue the loop in 3s
        setTimeout(nextFrame, 3000);
    }
}
// Start the loop
setTimeout(nextFrame, 0);

В качестве возможной альтернативы может быть полезно прочитать setInterval.

Ответ 3

Один из способов сделать это - использовать RxJS. Пожалуйста, посмотрите здесь рабочий пример

Rx.Observable
  .interval(1000)
  .take(10)
  .subscribe((x) => console.log(x))

Ответ 4

Вы не очень конкретно о том, что хотите, но я бы сказал, что основная проблема заключается в том, что вы вызываете someanimation() без задержки. Поэтому, возможно, это решает его для вас:

for (var i = 0; i < n; i++) {
    setTimeout(someanimation, 3000 * i);
};

Обратите внимание на отсутствующий () после someanimation, так как это обратный вызов для setTimeout().

Ответ 5

function myFunction() {
    var x;
for(var i=0;i<10;i++){
    if (confirm("Press a button!") == true) {
        x = "You pressed OK!";
    } else {
        x = "You pressed Cancel!";
    }
    document.getElementById("demo").innerHTML = x;
}
}``

Ответ 6

создайте такую функцию, как:

function sleep_until (seconds) {
   var max_sec = new Date().getTime();
   while (new Date() < max_sec + seconds * 1000) {}
    return true;
}

а затем измените код на

i=0;
while (i < n) {
    someanimation();
    sleep_until(3);
    do_someotheranimation();
};