clearInterval()

クリアインターバル（非同期処理）

意味定期実行を中止

clearInterval()とは？

clearInterval()は、setInterval()によって設定された繰り返しの関数実行を停止するためのメソッドです。

clearInterval()の具体的な使い方

ストップウォッチの実装

<div id="stopwatch">0.00</div>
<button onclick="startStopwatch()">開始</button>
<button onclick="stopStopwatch()">停止</button>
<button onclick="resetStopwatch()">リセット</button>

<script>
let time = 0;
let intervalId;

function updateDisplay() {
  document.getElementById('stopwatch').textContent = (time / 100).toFixed(2);
}

function startStopwatch() {
  if (!intervalId) {
    intervalId = setInterval(() => {
      time++;
      updateDisplay();
    }, 10);
  }
}

function stopStopwatch() {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
}

function resetStopwatch() {
  stopStopwatch();
  time = 0;
  updateDisplay();
}
</script>

setIntervalとclearIntervalを使用してストップウォッチを実装しています。開始ボタンで計測を開始し、停止ボタンで一時停止、リセットボタンで0に戻すことができます。

条件付き自動停止の実装

function countToFive() {
  let count = 0;
  const intervalId = setInterval(() => {
    console.log(++count);
    if (count >= 5) {
      clearInterval(intervalId);
      console.log('カウント終了');
    }
  }, 1000);
}

countToFive();

👇出力結果

1
2
3
4
5
カウント終了

1秒ごとにカウントを増やし、5に達したらclearIntervalで自動的に停止する関数です。setIntervalとclearIntervalを組み合わせて使用しています。

clearInterval()に関するよくある質問

Q. clearIntervalの引数は何ですか？

A. clearInterval()の引数は、停止したいsetInterval()が返したタイマーIDです。このIDはsetInterval()を呼び出した時に返される整数値です。

Q. clearIntervalを複数回呼んでも大丈夫？

A. はい、同じタイマーIDに対して複数回clearInterval()を呼び出しても問題ありません。2回目以降の呼び出しは単に無視されます。

Q. clearIntervalの戻り値は何ですか？

A. clearInterval()は戻り値を持ちません（undefinedを返します）。関数の目的は指定されたタイマーを停止することだけです。

clearInterval()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのclearInterval()やrequestAnimationFrame()、Promise.resolve()、catch()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。