JavaScript

setInterval が止まらない

clearInterval を呼んでいない

こんな症状

setInterval で始めた処理が止まらない。タイマー処理を制御したいときに起きやすいよ。

まず試す

const id = setInterval(...) でIDを保存し、止めたいときに clearInterval(id) を呼ぶ。

const id = setInterval(() => update(), 1000);
// 止めたいときに
clearInterval(id);

これで直らなければ、下の「自分のケース」を確認。

setIntervalの戻り値（タイマーID）を変数に保存していない、またはclearIntervalを呼んでいないよ。setIntervalは指定した間隔で永遠に実行し続けるから、明示的に停止しないと止まらないんだ。IDを保存しないとclearIntervalで指定できないよ。

✕ エラーが起きるコード

setInterval(() => update(), 1000);
// ID を保存していない

✓ 直したコード

const id = setInterval(() => update(), 1000);
clearInterval(id);

clearInterval 後に処理が止まればOK。

毎回 setInterval を呼んでタイマーが増殖していないかも確認しよう。setTimeout の再帰の方が制御しやすい場合もある。

この解決法は役立ちましたか？

Uncaught ReferenceError: xxx is not defined — 変数・関数名のタイポ
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') — 取得しようとしたHTML要素が見つかっていない
404 Not Found（スクリプトが読み込まれない） — script の src パスが間違っている
計算結果が NaN になる — 文字列を数値に変換していない
TypeError: xxx is not a function — 関数でないものを呼び出している

🚀 JavaScriptコースで基礎を学ぼう！

エラーの原因を根本から理解するには、基礎を体系的に学ぶのが近道です。完全無料・登録不要。