残り時間が0秒未満でタイマーを停止する、停止の仕方

Question

前提・実現したいこと

JavaScriptでタイマーを作成しています。
１５秒カウントダウンさせ、０秒になったら、タイマーを停止したいのですが、停止させることができません。

下記の部分がうまくいっていないようなのですが、どのようにかけばよいか教えていただけますでしょうか？

//残り時間が0秒未満だったら、タイマーを停止する。
    if(leftTime < 0) {
      clearTimeout();
    }

該当のソースコード

<script>
  const secondElement = document.querySelector('.second');
  const goalTime = new Date().getTime() + 15 * 1000;

  update();

  function update() {
    // 現在時刻
    const currentTime = new Date().getTime();
    // 目標時刻までの残り時間
    const leftTime = goalTime - currentTime;

    //残り時間が0秒未満だったら、タイマーを停止する。
    if(leftTime < 0) {
      clearTimeout();
    }
    // 秒の表示。
    secondElement.innerText = (leftTime / 1000).toFixed(2);
    // 次のフレームで再度update()を実行する
    requestAnimationFrame(update);
  }
</script>

Answer 1

requestAnimationFrameで次のタイミングを予約する以上、それを実行しなければ次のタイミングはやってこなくなります。returnなどでrequestAnimationFrameの行に辿り着く前に脱出しましょう。

    //残り時間が0秒未満だったら、タイマーを停止する。
    if(leftTime < 0) {
      secondElement.innerText = 'time up!';
      return;
    }
    // 秒の表示。
    secondElement.innerText = (leftTime / 1000).toFixed(2);
    // 次のフレームで再度update()を実行する
    requestAnimationFrame(update);

Comments

[退会済みユーザー]

早速のご回答ありがとうございます。上記でうまくできました！本当にありがとうございます。

[miyabi_pudding]

cancelAnimationFrameを使わなくてもこれでいけるのですね。
requestAnimationFrameの性質も含め、私も勉強になりました。

Answer 2

requestAnimationFrameを止める方法は、
crearTimeoutではないからです。
正しくは下記です。

const secondElement = document.querySelector('.second');
const goalTime = new Date().getTime() + 15 * 1000;

update();

function update() {
  // 止めるためにIDを取得する。requestAnimationFrameは先に書いても、意図した動きになると思われる
  const requestId = requestAnimationFrame(update);
  // 現在時刻
  const currentTime = new Date().getTime();
  // 目標時刻までの残り時間
  const leftTime = goalTime - currentTime;

  // 秒の表示。
  secondElement.innerText = (leftTime / 1000).toFixed(2);

  //残り時間が0秒未満だったら、タイマーを停止する。
  if(leftTime < 0) {
    // requestAnimationFrameを使用しているので、専用の止めるメソッドを使用
    cancelAnimationFrame(requestId);
    
  }
  
  // 次のフレームで再度update()を実行する
  //requestAnimationFrame(update);
}

Comments

[退会済みユーザー]

ご回答ありがとうございます。上記につきましても参考にさせていただきます！

Answer 3

タイマーの処理自体がどの部分でしょう？
setTimeoutで処理するならidを指定してclearTimeoutをしつつ
繰り返し呼び出し処理を止めればよいのでは？

Comments

[退会済みユーザー]

あまりわからず書いておりますため、うまく説明ができずすみません。
教えていただいた下記の形でうまくできました。気に留めていただきありがとうございました。

```
if(leftTime < 0) {
secondElement.innerText = 'time up!';
return;
}
```