JavaScriptでwhileループ内でポーズを作成する

Question

whileループ内にポーズを作成して、それぞれが3秒後に表示されるnのアニメーションを作成できるようにします。

私は以下を試しましたが、動作しません。私が間違っていることを誰かに見せてもらいたいです。ありがとう!!

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

}; 

Answer 1

setTimeoutにコードを変更。 Javascriptに後で別のコードを実行するように要求します。

"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()を呼び出すことであると思います。だから、多分これはあなたのためにそれを解決します。それはsetTimeout()のためのコールバックですと

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

someanimation後に行方不明()に注意してください。

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を使用する方法の1つです。どうぞご覧くださいworking example here

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