導入：なぜclearTimeoutが必要なのか？
JavaScriptで一定時間後に処理を実行したいとき、私たちは「setTimeout」を使います。しかし、プログラムを作っていると「やっぱり途中で実行をキャンセルしたい」「ページ遷移する前にタイマーを止めないとエラーになる」といった場面に遭遇します。この「タイマーを止める」という重要な役割を担うのが「clearTimeout」です。これを使いこなすことで、予期せぬバグを防ぎ、効率的なコードを書けるようになります。
基礎知識：タイマーの仕組み
setTimeoutを使うと、ブラウザは内部的に「タイマーID」という数字を割り当てます。これは「これから実行されるタスクの整理番号」のようなものです。
clearTimeoutは、このIDを引数として受け取ることで、「その整理番号のタスクはもう実行しなくていいよ」とブラウザに指示を出す命令です。これを知っておかないと、画面を離れた後もバックグラウンドで処理が動き続け、パフォーマンスの低下や予期せぬエラーの原因になります。
実装：clearTimeoutの使い方
手順はとてもシンプルです。
1. setTimeoutを呼び出す際、戻り値（タイマーID）を変数に保存する。
2. 処理を止めたいタイミングで、その変数をclearTimeoutに渡す。
これだけで、予約していた処理を無効化できます。
サンプルプログラム
以下のコードは、ボタンを押してから3秒後にメッセージを表示しますが、3秒以内に「キャンセルボタン」を押すと表示を阻止するサンプルです。
// タイマーIDを保存するための変数
let timerId = null;
// 3秒後に実行される処理
function startTask() {
timerId = setTimeout(() => {
console.log("処理が実行されました！");
}, 3000);
console.log("タイマーを開始しました。3秒後に実行されます。");
}
// 実行をキャンセルする処理
function cancelTask() {
if (timerId) {
clearTimeout(timerId); // タイマーIDを指定して処理を破棄
console.log("タイマーをキャンセルしました。");
timerId = null; // IDをリセットしておく
}
}
// 動作確認：
// startTask(); // 実行するとタイマーが始まります
// cancelTask(); // 3秒以内に実行すると、startTaskの内容は実行されません
応用・注意点
現場でよくある失敗として「タイマーIDの初期化忘れ」があります。clearTimeoutを実行しても、変数の中に古いIDが残ったままだと、後から誤作動を起こす可能性があります。必ず clearTimeoutを実行した後は、変数を null にリセットする 癖をつけましょう。
また、Reactなどのライブラリを使用している場合は、コンポーネントが破棄されるタイミング（クリーンアップ関数）で必ずclearTimeoutを呼ぶのが鉄則です。これを忘れると「存在しない画面に対して処理を行おうとする」というメモリリークの原因になるため、常に「タイマーを仕掛けたら、片付ける場所も用意する」というセットで考えるのがプロの流儀です。