clearInterval で解除の基本 — clearInterval(id)
setInterval で始めた「一定間隔の繰り返し」を止めるのが clearInterval(id)。開始時に返される“タイマーID”を覚えておき、不要になったら解除します。
基本の使い方
// 1秒ごとに「tick」
const id = setInterval(() => {
console.log("tick");
}, 1000);
// 3秒後に停止
setTimeout(() => {
clearInterval(id);
console.log("停止");
}, 3000);
- タイマーID:
setInterval(...)の戻り値。これをclearInterval(id)に渡すと停止できる。 - いつ止めるか: 条件を満たしたとき、画面遷移・Unmount時、ユーザー操作などで。
よく使うテンプレート集
条件を満たしたら止める（回数で停止）
let count = 0;
const id = setInterval(() => {
console.log(++count);
if (count >= 5) clearInterval(id); // 5回で停止
}, 1000);
ボタンで開始・停止（トグル）
let id = null;
function start() {
if (!id) id = setInterval(() => console.log("running..."), 1000);
}
function stop() {
if (id) { clearInterval(id); id = null; }
}
ページ/コンポーネント破棄時に確実に止める
let id = setInterval(pollServer, 5000);
// 破棄時
function cleanup() {
clearInterval(id);
}
連打による重複起動を防ぐ（常に最新だけ）
let id = null;
function ensureSingleInterval() {
if (id) clearInterval(id);
id = setInterval(() => console.log("latest only"), 1000);
}
実務でのポイント
- IDを必ず保持: 停止できなくなるので、外から参照可能な変数やクラス/コンポーネントのフィールドに保存する。
- 停止忘れを防ぐ: 画面遷移・Unmount・エラー時の後始末で
clearIntervalを必ず呼ぶ。古いDOMや状態を触るバグ予防になる。 - 重複起動に注意: ボタン連打や再初期化で複数の interval が走り続けると負荷増。再設定前に停止する。
- 負荷管理: 間隔は目的に見合う値に。短すぎると CPU 使用率が上がる。
ありがちなハマりポイントと対策
- IDを取り違える:
- 対策: 用途別に変数名を分ける（例:
pollId,uiId）。予約直後に保存。
- 対策: 用途別に変数名を分ける（例:
- 停止できないスコープ問題:
- 対策: 停止が必要な範囲でIDを共有（外側スコープやフィールドに保持）。
- 「秒」と「ミリ秒」を誤認:
- 対策: 1000ms = 1秒。人間の秒を必ずミリ秒に変換。
- 非同期で処理が重なる:
- 対策: 実行時間が間隔を超えるなら、再帰的
setTimeout（処理完了後に次回予約）へ切り替える。
- 対策: 実行時間が間隔を超えるなら、再帰的
練習問題（手を動かして覚える）
// 1) 1秒ごとに時刻を表示 → 5秒後に停止
const id1 = setInterval(() => console.log(new Date().toLocaleTimeString()), 1000);
setTimeout(() => clearInterval(id1), 5000);
// 2) 2秒ごとに「Hello」を3回だけ
let n = 0;
const id2 = setInterval(() => {
console.log("Hello");
if (++n >= 3) clearInterval(id2);
}, 2000);
// 3) 常に最新だけが動作（再設定時は前回停止）
let id3 = null;
function scheduleLatest() {
if (id3) clearInterval(id3);
id3 = setInterval(() => console.log("最新のみ"), 1000);
}
scheduleLatest(); scheduleLatest(); scheduleLatest();
// 4) トグル関数（1回目で開始、次で停止）
let id4 = null;
function toggle() {
if (id4) { clearInterval(id4); id4 = null; console.log("停止"); }
else { id4 = setInterval(() => console.log("動作中"), 1000); }
}
直感的な指針
- 「繰り返し開始」→ IDを保持 → 「不要」で
clearInterval(id)。 - 再設定前に停止して重複を避ける。
- 後始末の場面（遷移/Unmount）で必ず停止。