JavaScript/clearTimeout

clearTimeout()は、JavaScriptにおいて、setTimeout()で設定されたタイマーをキャンセルするためのメソッドです。タイマーの実行を未然に防ぎたい場合に使用します。

概要

clearTimeout()はglobalThisオブジェクトのメソッドで、グローバルスコープで直接使用できます。

構文

clearTimeout(timerId);

• timerId: キャンセルするタイマーのID。setTimeout()が返す値です。

解説

setTimeout()はタイマーIDを返します。このIDは、タイマーをキャンセルするためにclearTimeout()に渡されます。clearTimeout()が呼び出されると、指定されたタイマーは実行されなくなります。

例1

タイマーのキャンセル

function greet(name) {
  console.log("Hello, " + name + "!");
}

const timerId = setTimeout(greet, 2000, "Hanako"); // 2秒後にgreet("Hanako")を実行

clearTimeout(timerId); // タイマーをキャンセル

console.log("タイマーはキャンセルされました");

このコードでは、「タイマーはキャンセルされました」がコンソールに出力された後、2秒経過してもgreet("Hanako")は実行されません。なぜなら、clearTimeout(timerId)によってタイマーがキャンセルされたからです。

例2

条件によるタイマーのキャンセル

特定の条件に基づいてタイマーをキャンセルすることも可能です。

let countdown = 10;
let timerId = null;

function updateCountdown() {
  console.log("カウントダウン: " + countdown);
  countdown--;

  if (countdown < 0) {
    clearTimeout(timerId); // カウントダウンが0未満になったらタイマーをキャンセル
    console.log("カウントダウン終了！");
  } else {
    timerId = setTimeout(updateCountdown, 1000); // 1秒ごとにupdateCountdownを再実行
  }
}

updateCountdown();

この例では、updateCountdown()関数が1秒ごとに実行され、カウントダウンが表示されます。カウントダウンが0未満になると、clearTimeout(timerId)が呼び出され、タイマーがキャンセルされます。

例3

存在しないtimerIdを指定した場合

存在しないtimerIdをclearTimeout()に渡しても、エラーは発生しません。何も起こりません。

clearTimeout(9999); // 存在しないタイマーIDを指定してもエラーにならない
console.log("特に何も起こりません");

注意点

• clearTimeout()は、タイマーがまだ実行されていない場合にのみ有効です。タイマーが既に実行されてしまった後でclearTimeout()を呼び出しても、効果はありません。
• setInterval()で設定されたタイマーをキャンセルするには、clearInterval()を使用します。

まとめ

clearTimeout()は、setTimeout()と組み合わせて使用することで、JavaScriptで柔軟な時間制御を実現するための重要なツールです。不要になったタイマーを適切にキャンセルすることで、パフォーマンスの改善や予期せぬ動作の防止に繋がります。

関連項目

• setTimeout(): 指定した時間後に一度だけ関数を実行します。
• setInterval(): 一定間隔で繰り返し関数を実行します。
• clearInterval(): setInterval()で設定したタイマーをキャンセルします。