ゲームなどで時間内で得点を競うものもあります。時間がくれば終了させる方法を記録します。

そのしくはというと非同期処理ということですが、非同期処理ってなにかなということで詳しく説明されている記事がありましたので参考に。

単純に時間がくれば終了にしたい場合は

以下のサイト、コードの補完が使えて即実行できるサイトで紹介してあるので便利です。

let start = Date.now(); // 開始時間を覚える

let timer = setInterval(function() {
  // 開始からの経過時間は？
  let timePassed = Date.now() - start;

  if (timePassed >= 2000) {
    clearInterval(timer); // 2秒後にアニメーションが終了
    return;
  }

  // timePassed 時点のアニメーションを描画
  draw(timePassed);

}, 20);

// timePassed は 0 から 2000 まで進む
// なので、left は 0px から 400px になります
function draw(timePassed) {
  train.style.left = timePassed / 5 + 'px';
}

"setInterval()"に全ての処理を任せる形になっています。

次にフラグを使った方法を以下サイトを参考に簡単な処理に分解してみました。

実行する関数は2つ

function main(){
　　process()
　　timer = setInterval(countdown, 1000 );
}

ゲームなど何らかを処理する関数が"process()"
時間がくれば処理を終わらせるタイマーが

　timer = setInterval(countdown, 1000 );

1秒間に1回countdown関数を実行します。

countdown関数は、変数timeCountで宣言した数字を"1"ずつ減らしていきます。そして0以下になったら"clearInterval(timer)"でタイマーを止めます。そして

でタイマーが終わったことをtrue値して変数に代入します。

function countdown(){
  timeCount -=1;
  console.log(timeCount)
  if ( timeCount <= 0 ){
      clearInterval(timer);
      console.log("おしまい");
      stopflg= true;
  }  
}

実行する主体の関数process()は

function process(){

// 何らかの処理のコード


// 停止の処理
if (stopflg){
    cancelAnimationFrame (process);
 }else{      
    console.log("countUp");
  }  

// 繰り返しの処理(60フレーム)
  requestAnimationFrame(process);
}

停止の命令。この命令でprocess()関数は終了します。

"stopflg"が"false"の時には

という感じにして、タイマーが動いている時には"countUp"とコンソールに出るようにしています。

以上でスタートしてストップする動作、タイマーが動き出してタイマーが停めれば全体がストップするという一連の流れをまとめてみました。