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で柔軟な時間制御を実現するための重要なツールです。不要になったインターバルを適切に停止することで、メモリリークを防ぎ、パフォーマンスを維持することができます。

概要

解説

注意点

まとめ

関連項目