web-dev-qa-db-ja.com

JavaScriptでwhileループ内に一時停止を作成する

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

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

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

};
javascript-eventswhile-loop
23
djianp

setTimeoutは一時停止しません。後で他のコードを実行するようJavascriptに要求します。

「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);
37
Karl Knechtel

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を読んでおく価値があるかもしれません。

11
psmay

さて、Promisesを搭載したES6-7のおかげで、一時停止して同時に見栄えを良くすることができます！

var id = 0;

async function do() {
  while(true) {
    await pause(id);
    //will happen only after pause is done
    id++; 
  }
}
function pause(id) {
  return new Promise(resolve => setTimeout(() => {
    console.log(`pause ${id} is over`);
    resolve();
  }, 1500)); 
}

do();
4
Telion

その方法の1つは、RxJSを使用することです。 実際の例はこちら をご覧ください

Rx.Observable
  .interval(1000)
  .take(10)
  .subscribe((x) => console.log(x))
3
Vlad Bezden
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;
}
}``
0
for

あなたは何をしたいのかあまり明確ではありませんが、主な問題はsomeanimation()を遅滞なく呼び出すことです。だから、これはあなたのためにそれを解決するかもしれません：

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

setTimeout()のコールバックであるため、someanimationの後に欠落している_()_に注意してください。

0
sjngm

次のような関数を作成します。

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