JavaScript | Web API：タイマー・スケジューリング － clearInterval

JavaScript JavaScript
スポンサーリンク

clearInterval は「繰り返し処理を止めるためのスイッチ」

clearInterval は、setInterval で始めた“繰り返し処理”を止めるための関数 です。

setInterval は「◯秒ごとにこの処理を実行して」と予約する関数でした。
そして clearInterval は、その予約を 途中で止めるためのブレーキ です。

時計の更新、アニメーション、ポーリング（定期的な API 呼び出し）など、
「ずっと続く処理」を扱うときには、
「いつ止めるか」 を設計することがとても重要になります。

setInterval と clearInterval の関係をまず理解する

setInterval は「繰り返しの予約」を返す

setInterval を呼ぶと、ブラウザは「繰り返し処理」を開始し、
その処理を識別するための ID（番号） を返します。

const id = setInterval(() => {
  console.log("1秒ごとに実行");
}, 1000);
JavaScript

この id が、後で止めるための鍵になります。

clearInterval は「その ID の繰り返しを止める」

clearInterval(id);
JavaScript

これだけで、
setInterval による繰り返し処理は完全に停止します。

ID を渡さないと止められないので、
ID をどこに保存するか がとても大事です。

具体例：スタートボタンで開始、ストップボタンで停止するタイマー

HTML のイメージ

<button id="start">スタート</button>
<button id="stop">ストップ</button>
<div id="count"></div>

JavaScript の実装

const startButton = document.querySelector("#start");
const stopButton = document.querySelector("#stop");
const countDisplay = document.querySelector("#count");

let count = 0;
let timerId = null;

startButton.addEventListener("click", () => {
  if (timerId !== null) return; // 二重起動を防ぐ

  timerId = setInterval(() => {
    count++;
    countDisplay.textContent = `${count} 秒経過`;
  }, 1000);
});

stopButton.addEventListener("click", () => {
  if (timerId !== null) {
    clearInterval(timerId);
    timerId = null;
  }
});
JavaScript

ここでのポイントは、

「動いているかどうか」を timerId が null かどうかで管理する
止めたら必ず timerId = null に戻す

ということです。

このパターンは実務でもよく使われます。

clearInterval が特に重要になる場面

ページを離れたときに止めないと無駄な処理が走り続ける

例えば、5 秒ごとに API を叩くポーリング処理。

const id = setInterval(fetchStatus, 5000);
JavaScript

ページを閉じたり、SPA の別画面に移動したりしても、
止めない限りこの処理は裏で動き続けます。

無駄な通信が増える
サーバーに負荷がかかる
バッテリーを消耗する

などの問題が起きるので、
不要になったら必ず clearInterval で止める のが鉄則です。

アニメーションの終了や中断にも使う

例えば、背景色を 0.1 秒ごとに変えるアニメーション。

const id = setInterval(() => {
  document.body.style.backgroundColor =
    `hsl(${Math.random() * 360}, 80%, 60%)`;
}, 100);
JavaScript

ユーザーが「停止」ボタンを押したら止めたいですよね。

clearInterval(id);
JavaScript

アニメーション系は「開始」と「停止」がセットなので、
clearInterval が欠かせません。

clearInterval のよくある落とし穴

「ID を保存していない」→ 止められない

初心者がよくやるミスがこれです。

setInterval(() => {
  console.log("動いてる");
}, 1000);

// 止めたいけど ID がない！
clearInterval(/* ??? */);
JavaScript

ID を保存していないと、
止める手段がなくなります。

必ず変数に保存しましょう。

const id = setInterval(...);
clearInterval(id);
JavaScript

「ID を上書きしてしまう」→ 古いタイマーが残る

例えばこういうコード。

let id = setInterval(a, 1000);
id = setInterval(b, 1000);
JavaScript

a のタイマーは止まっていません。
ID を上書きしただけで、古いタイマーは裏で動き続けます。

止める前に必ずキャンセルする癖をつけましょう。

clearInterval(id);
id = setInterval(b, 1000);
JavaScript

clearInterval に「存在しない ID」を渡してもエラーにはならない

clearInterval(999999);
clearInterval(null);
clearInterval(undefined);
JavaScript

全部「何も起きない」だけです。

だからこそ、
「とりあえず clearInterval してから新しく setInterval する」
という安全な書き方がよく使われます。

clearInterval(timerId);
timerId = setInterval(...);
JavaScript

具体例：カウントダウンタイマーを作る

HTML

<div id="timer"></div>
<button id="start">開始</button>
<button id="stop">停止</button>

JavaScript

const timer = document.querySelector("#timer");
const start = document.querySelector("#start");
const stop = document.querySelector("#stop");

let remaining = 10;
let timerId = null;

function update() {
  timer.textContent = `${remaining} 秒`;
  remaining--;

  if (remaining < 0) {
    clearInterval(timerId);
    timerId = null;
    timer.textContent = "終了！";
  }
}

start.addEventListener("click", () => {
  if (timerId !== null) return;

  remaining = 10;
  update();
  timerId = setInterval(update, 1000);
});

stop.addEventListener("click", () => {
  clearInterval(timerId);
  timerId = null;
});
JavaScript

ここでは、

開始時に 1 回実行
その後は 1 秒ごとに update
0 になったら clearInterval で停止

という流れになっています。

初心者として clearInterval で本当に掴んでほしいこと

clearInterval は「setInterval の繰り返しを止めるための関数」
止めるには setInterval の戻り値（ID）を必ず保存しておく必要がある
不要になったタイマーを止めないと、裏で処理が走り続けて無駄が発生する
ID を上書きすると古いタイマーが残るので、必ず clearInterval してから新しいタイマーを作る
「開始」「停止」をセットで設計するのが setInterval の基本

まずは、

1 秒ごとに色が変わるボックス
→ ボタンで停止できるようにする

みたいな小さな実験をしてみると、
clearInterval の「止める感覚」がすぐに身につきます。

スポンサーリンク
タイトルとURLをコピーしました