停止javascript循環，setTimeout

Question

此動畫應在10秒后停止播放（停止下雪）。 我在底部添加了一個函數，但實際上是在10秒后開始動畫，而不是在10秒后停止動畫。

我只希望它總播放10秒鍾，然后立即開始播放，請參閱我的codePen來了解我的意思。

setTimeout(function() {
createSnow(20);
loop();
}, 10000)

這是一個CodePen來了解我的意思： https ://codepen.io/celli/pen/XzzjRW

Answer 1

您要做的是創建一個“計時器”，查找開始時間和當前時間之間的時差。

我不確定您是否要在循環內createSnow(20) ，因此我將其放在前面作為初始化。

createSnow(20);

const start = new Date();
while(new Date() - start < 10000) {
  loop();
}

Answer 2

你近了 您只需要一種方法來告訴系統停止動畫循環。 看到我的codepen： https ://codepen.io/intervalia/pen/zPPoBZ

我添加了一個變量來指示動畫是否應該發生：

var animating = true;

停止動畫的例程：

function stopAnimation() {
  animating = false;
  //Add something in here to clear the screen
}

動畫循環中的驗證檢查：

function loop() {
  if (animating) {
    draw();
    update();
    animFrame(loop);
  }
}

並更改超時以關閉動畫：

createSnow(150);
loop();

setTimeout(stopAnimation, 10000);

很棒的動畫！

Answer 3

使用cancelAnimationFrame 。

樣品用法

聲明cancelAnimFrame ：

var cancelAnimFrame =
  window.cancelAnimationFrame ||
  window.mozcancelAnimationFrame ||
  window.webkitcancelAnimationFrame ||
  window.mscancelAnimationFrame;

更新loop功能：

var animId;
function loop() {
  draw();
  update();
  animId = animFrame(loop);
}

並使用animId停止動畫。 （如前所述，開始下雪應該超出setTimeout 。）

createSnow(20);
loop();
setTimeout(function() {
  cancelAnimFrame(animId)
}, 1000)

Answer 4

唯一需要更改的是對代碼plz進行少許更改，請參見下面的代碼：

var timeOut = setTimeout(function() {
createSnow(20);
loop();
}, 10000);

clearTimeout(timeOut);