requestAnimationFrameを使ってsetIntervalタイマーを停止する方法

2024-04-05

JavaScriptでsetInterval呼び出しを停止する方法

clearInterval 関数を使用する

setInterval でタイマーを設定すると、そのタイマーにはIDが割り当てられます。clearInterval 関数はこのIDを引数として受け取り、指定されたタイマーを停止します。

// 1秒ごとにカウントアップするタイマーを設定
const intervalId = setInterval(() => {
  console.log(Date.now());
}, 1000);

// 5秒後にタイマーを停止
setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

上記コードでは、まず setInterval で1秒ごとにカウントアップするタイマーを設定します。そして、setTimeout で5秒後に clearInterval を呼び出し、タイマーを停止しています。

変数にIDを格納して停止する

上記のコードは、clearInterval を呼び出す際にタイマーIDを直接記述しています。しかし、タイマーIDは変数に格納しておくと、コードがより分かりやすくなります。

// 1秒ごとにカウントアップするタイマーを設定
const intervalId = setInterval(() => {
  console.log(Date.now());
}, 1000);

// タイマーを停止する関数
function stopTimer() {
  clearInterval(intervalId);
}

// ボタンクリック時にタイマーを停止
document.getElementById("stopButton").addEventListener("click", stopTimer);

上記コードでは、setInterval でタイマーを設定し、そのIDを intervalId という変数に格納しています。そして、stopTimer という関数を作成し、clearInterval を呼び出してタイマーを停止しています。stopTimer 関数は、ボタンクリック時に呼び出されます。

clearTimeout との違い

clearInterval は setInterval で設定されたタイマーを停止する関数です。一方、clearTimeout は setTimeout で設定されたタイマーを停止する関数です。

// 1秒後にメッセージを表示するタイマーを設定
const timeoutId = setTimeout(() => {
  console.log("Hello!");
}, 1000);

// 0.5秒後にタイマーを停止
setTimeout(() => {
  clearTimeout(timeoutId);
}, 500);

setInterval 呼び出しを停止するには、clearInterval 関数を使用します。clearInterval はタイマーIDを引数として受け取り、指定されたタイマーを停止します。タイマーIDは変数に格納しておくと、コードがより分かりやすくなります。

基本的な例

// 1秒ごとにカウントアップするタイマーを設定
const intervalId = setInterval(() => {
  console.log(Date.now());
}, 1000);

// 5秒後にタイマーを停止
setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

このコードは、1秒ごとにカウントアップするタイマーを設定し、5秒後に停止する例です。

変数にIDを格納して停止する

// 1秒ごとにカウントアップするタイマーを設定
const intervalId = setInterval(() => {
  console.log(Date.now());
}, 1000);

// タイマーを停止する関数
function stopTimer() {
  clearInterval(intervalId);
}

// ボタンクリック時にタイマーを停止
document.getElementById("stopButton").addEventListener("click", stopTimer);

clearTimeout との違い

// 1秒後にメッセージを表示するタイマーを設定
const timeoutId = setTimeout(() => {
  console.log("Hello!");
}, 1000);

// 0.5秒後にタイマーを停止
setTimeout(() => {
  clearTimeout(timeoutId);
}, 500);

上記のサンプルコードは基本的な例です。実際の使用例では、条件分岐やループ処理などを組み合わせて使用することが考えられます。
setInterval はブラウザが閉じている間も実行され続けるため、必要に応じて clearInterval で停止する必要があります。

setInterval 呼び出しを停止する他の方法

return 文を使用する

setInterval 内で return 文を使用すると、タイマーを停止することができます。

// 1秒ごとにカウントアップするタイマーを設定
const intervalId = setInterval(() => {
  console.log(Date.now());

  // 5秒後にタイマーを停止
  if (Date.now() >= Date.now() + 5000) {
    return;
  }
}, 1000);

while ループと Date.now() を使用して、タイマーを停止することができます。

// 1秒ごとにカウントアップするタイマーを設定
const intervalId = setInterval(() => {
  console.log(Date.now());
}, 1000);

// 5秒後にタイマーを停止
let startTime = Date.now();
while (Date.now() - startTime < 5000) {
  // 処理
}
clearInterval(intervalId);

requestAnimationFrame は、ブラウザのフレームレートに同期して処理を実行する関数です。この関数を使用して、タイマーを停止することができます。

// 1秒ごとにカウントアップするタイマーを設定
let startTime = Date.now();
const animationId = requestAnimationFrame(function animate() {
  console.log(Date.now());

  // 5秒後にタイマーを停止
  if (Date.now() - startTime >= 5000) {
    cancelAnimationFrame(animationId);
    return;
  }

  requestAnimationFrame(animate);
});