JavaScript/clearInterval

clearInterval()は、JavaScriptにおいて、setInterval()で設定された繰り返し実行されるインターバルを停止するためのメソッドです。不要になったインターバルを停止することで、パフォーマンスの改善や予期せぬ動作の防止に役立ちます。

概要

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

構文

clearInterval(intervalId);

intervalId: キャンセルするインターバルのID。setInterval()が返す値です。

解説

setInterval()はインターバルIDを返します。このIDは、インターバルを停止するためにclearInterval()に渡されます。clearInterval()が呼び出されると、指定されたインターバルは停止し、それ以降、関連付けられた関数やコードは実行されなくなります。

例1

インターバルの停止

let count = 0;
const intervalId = setInterval(() => {
  console.log("カウント: " + count);
  count++;

  if (count > 5) {
    clearInterval(intervalId); // カウントが5を超えたらインターバルを停止
    console.log("インターバルが停止されました");
  }
}, 1000); // 1秒ごとに実行

このコードでは、1秒ごとにカウントが表示され、カウントが5を超えるとclearInterval(intervalId)が呼び出され、インターバルが停止します。

例2

ボタンクリックでインターバルを停止

HTMLと組み合わせて、ボタンクリックなどのイベントでインターバルを停止する例です。

<!DOCTYPE '''html'''>
<html>
<head>
  <title>clearIntervalの例</title>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      let intervalId = null;

      document.getElementById("startBtn").addEventListener("click", () => {
        if (!intervalId) { // インターバルがまだ開始されていない場合のみ開始
          intervalId = setInterval(() => {
            console.log("インターバル実行中...");
          }, 1000);
        }
      });

      document.getElementById("stopBtn").addEventListener("click", () => {
        clearInterval(intervalId); // インターバルを停止
        intervalId = null; // intervalIdをnullにリセット（オプション）
        console.log("インターバルが停止されました");
      });
    });
  </script>
</head>
<body>
  <button id="startBtn">開始</button>
  <button id="stopBtn">停止</button>
</body>
</html>

この例では、「開始」ボタンをクリックするとインターバルが開始され、「停止」ボタンをクリックするとインターバルが停止します。intervalId = null;は必須ではありませんが、インターバルが停止したことを明示的に示すために、intervalIdをnullにリセットすることが推奨されます。

例3

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

存在しないintervalIdをclearInterval()に渡しても、エラーは発生しません。何も起こりません。これは、clearTimeout()と同様の挙動です。

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

注意点

clearInterval()は、インターバルがまだ実行されている場合にのみ有効です。インターバルが既に停止している場合、clearInterval()を呼び出しても何も起こりません。
setTimeout()で設定されたタイマーをキャンセルするには、clearTimeout()を使用します。

まとめ

clearInterval()は、setInterval()と組み合わせて使用することで、JavaScriptで柔軟な時間制御を実現するための重要なツールです。不要になったインターバルを適切に停止することで、メモリリークを防ぎ、パフォーマンスを維持することができます。

JavaScript/clearInterval

目次

概要

解説

注意点

まとめ

関連項目