clearInterval は「繰り返し処理を止めるためのスイッチ」
clearInterval は、setInterval で始めた“繰り返し処理”を止めるための関数 です。
setInterval は「◯秒ごとにこの処理を実行して」と予約する関数でした。
そして clearInterval は、その予約を 途中で止めるためのブレーキ です。
時計の更新、アニメーション、ポーリング（定期的な API 呼び出し）など、
「ずっと続く処理」を扱うときには、
「いつ止めるか」 を設計することがとても重要になります。
setInterval と clearInterval の関係をまず理解する
setInterval は「繰り返しの予約」を返す
setInterval を呼ぶと、ブラウザは「繰り返し処理」を開始し、
その処理を識別するための ID（番号） を返します。
const id = setInterval(() => {
console.log("1秒ごとに実行");
}, 1000);
この id が、後で止めるための鍵になります。
clearInterval は「その ID の繰り返しを止める」
clearInterval(id);
これだけで、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;
}
});
ここでのポイントは、
「動いているかどうか」を timerId が null かどうかで管理する
止めたら必ず timerId = null に戻す
ということです。
このパターンは実務でもよく使われます。
clearInterval が特に重要になる場面
ページを離れたときに止めないと無駄な処理が走り続ける
例えば、5 秒ごとに API を叩くポーリング処理。
const id = setInterval(fetchStatus, 5000);
ページを閉じたり、SPA の別画面に移動したりしても、
止めない限りこの処理は裏で動き続けます。
無駄な通信が増える
サーバーに負荷がかかる
バッテリーを消耗する
などの問題が起きるので、
不要になったら必ず clearInterval で止める のが鉄則です。
アニメーションの終了や中断にも使う
例えば、背景色を 0.1 秒ごとに変えるアニメーション。
const id = setInterval(() => {
document.body.style.backgroundColor =
`hsl(${Math.random() * 360}, 80%, 60%)`;
}, 100);
ユーザーが「停止」ボタンを押したら止めたいですよね。
clearInterval(id);
アニメーション系は「開始」と「停止」がセットなので、clearInterval が欠かせません。
clearInterval のよくある落とし穴
「ID を保存していない」→ 止められない
初心者がよくやるミスがこれです。
setInterval(() => {
console.log("動いてる");
}, 1000);
// 止めたいけど ID がない！
clearInterval(/* ??? */);
ID を保存していないと、
止める手段がなくなります。
必ず変数に保存しましょう。
const id = setInterval(...);
clearInterval(id);
「ID を上書きしてしまう」→ 古いタイマーが残る
例えばこういうコード。
let id = setInterval(a, 1000);
id = setInterval(b, 1000);
a のタイマーは止まっていません。
ID を上書きしただけで、古いタイマーは裏で動き続けます。
止める前に必ずキャンセルする癖をつけましょう。
clearInterval(id);
id = setInterval(b, 1000);
clearInterval に「存在しない ID」を渡してもエラーにはならない
clearInterval(999999);
clearInterval(null);
clearInterval(undefined);
全部「何も起きない」だけです。
だからこそ、
「とりあえず clearInterval してから新しく setInterval する」
という安全な書き方がよく使われます。
clearInterval(timerId);
timerId = setInterval(...);
具体例：カウントダウンタイマーを作る
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;
});
ここでは、
開始時に 1 回実行
その後は 1 秒ごとに update
0 になったら clearInterval で停止
という流れになっています。
初心者として clearInterval で本当に掴んでほしいこと
clearInterval は「setInterval の繰り返しを止めるための関数」
止めるには setInterval の戻り値（ID）を必ず保存しておく必要がある
不要になったタイマーを止めないと、裏で処理が走り続けて無駄が発生する
ID を上書きすると古いタイマーが残るので、必ず clearInterval してから新しいタイマーを作る
「開始」「停止」をセットで設計するのが setInterval の基本
まずは、
1 秒ごとに色が変わるボックス
→ ボタンで停止できるようにする
みたいな小さな実験をしてみると、
clearInterval の「止める感覚」がすぐに身につきます。