clearInterval 使い方

clearInterval 使い方【JavaScriptタイマー停止】setTimeoutとの違いも解説

説明: JavaScriptでタイマー処理を行う際、setInterval関数で定期的に処理を実行できますが、それを停止する場合はclearInterval関数を使用します。
この記事では、clearInterval関数の使い方、setTimeout関数との違い、具体的な使用例などを詳しく解説します。

clearIntervalの基本的な使い方

clearInterval関数は、setInterval関数によって設定されたタイマーを停止するために使用します。タイマーを停止するには、setInterval関数の戻り値として取得したタイマーIDをclearInterval関数に渡します。

clearInterval()関数の構文

clearInterval(timerId);

timerIdは、setInterval関数によって返されるタイマーIDです。

setIntervalで取得したタイマーIDの必要性

setInterval関数は、タイマーをセットするたびに固有のIDを発行します。このIDを用いることで、どのタイマーを停止するかを明示的に指定することができます。

タイマー停止の仕組みと注意点

clearInterval関数は、指定されたタイマーIDに紐付けられた処理の実行を停止します。タイマーは即座に停止されるため、現在実行中の処理が完了するまで待つことはありません。

clearIntervalとsetTimeoutの違い

JavaScriptには、タイマー処理を行うための関数がいくつか用意されていますが、setIntervalとsetTimeoutは混同しやすいものです。それぞれの違いを明確にしておきましょう。

関数 説明
setInterval() 指定した間隔で処理を繰り返し実行します。
setTimeout() 指定した時間経過後に処理を一度だけ実行します。

setInterval: 定期的に処理を実行

setInterval関数は、指定した間隔で処理を繰り返し実行するために使用します。例えば、1秒ごとに時計を更新する場合などに使用します。

setTimeout: 一定時間後に処理を一度だけ実行

setTimeout関数は、指定した時間経過後に処理を一度だけ実行するために使用します。例えば、5秒後にメッセージを表示する場合などに使用します。

それぞれの用途と使い分け

  • 定期的な処理を実行したい場合はsetIntervalを使用します。
  • 一定時間後に一度だけ処理を実行したい場合はsetTimeoutを使用します。

clearIntervalの実践的な使用例

カウントダウンタイマーの実装

let count = 10;
let timerId = setInterval(function() {
  count--;
  document.getElementById("timer").innerHTML = count;
  if (count === 0) {
    clearInterval(timerId);
    document.getElementById("timer").innerHTML = "時間切れ！";
  }
}, 1000);

アニメーションの実装と停止

let position = 0;
let timerId = setInterval(function() {
  position += 10;
  document.getElementById("animation").style.left = position + "px";
  if (position > 200) {
    clearInterval(timerId);
  }
}, 50);

ユーザー操作によるタイマーの一時停止/再開

let count = 0;
let timerId;

function startTimer() {
  timerId = setInterval(function() {
    count++;
    document.getElementById("timer").innerHTML = count;
  }, 1000);
}

function stopTimer() {
  clearInterval(timerId);
}

document.getElementById("start").addEventListener("click", startTimer);
document.getElementById("stop").addEventListener("click", stopTimer);

まとめ

clearInterval関数は、setInterval関数で設定したタイマーを停止するために使用します。タイマーIDを指定することで、特定のタイマーを停止することができます。setTimeout関数との違いを理解し、それぞれの用途に合わせて使い分けましょう。

QA

Q1: clearInterval関数を使わずにタイマーを停止することはできますか？

A1: いいえ、setInterval関数で設定したタイマーを停止するには、必ずclearInterval関数を使用する必要があります。

Q2: 複数のタイマーを同時に停止することはできますか？

A2: はい、それぞれのタイマーIDに対してclearInterval関数を実行することで、複数のタイマーを同時に停止することができます。

Q3: clearInterval関数を実行した後、同じタイマーIDで再びタイマーをセットすることはできますか？

A3: はい、clearInterval関数を実行した後でも、同じタイマーIDで再びsetInterval関数を実行することで、タイマーを再セットすることができます。

その他の参考記事:jquery setinterval