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

Question

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

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

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

}; 

Answer 1

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

Googling for «setTimeout loop» сообщает вам, что именно вам нужно знать. Если вы немного оглядитесь, он даже упоминает 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); 

Answer 2

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

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

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

Answer 3

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

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(); 
}; 

Answer 4

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 в качестве возможной альтернативы.

Answer 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; 
} 
}`` 

Answer 6

Один из способов сделать это - использовать RxJS. Пожалуйста, взгляните на working example here

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