【JavaScript】setInterval()の使用をクリア（停止）する方法を解説

setInterval()メソッドとは

JavaScriptのsetInterval()メソッドは、指定した間隔（ミリ秒）ごとに式や関数を繰り返し評価・実行するために使用されます。このメソッドは、指定した時間が経過するたびに関数を呼び出し、停止しない限り無限に繰り返し実行されます。

以下の例では、2000ミリ秒（2秒）ごとにアラート「Hello」が表示されます。一度だけではなく、停止するまで何度も繰り返し実行される点に注意してください。

setInterval(function() {
  alert('Hello');
}, 2000);

setInterval()をクリアするにはclearInterval()を使う

setInterval()による繰り返し処理を停止したい場合は、window.clearInterval()メソッドを使用します。setInterval()は呼び出し時に戻り値として一意のタイマーIDを返すため、まずそのIDを変数に保存しておきます。そして、処理を止めたいタイミングで、そのIDを引数としてclearInterval()に渡します。

// タイマーIDを変数に保存
const intervalId = window.setInterval(function() {
  alert('Hello');
}, 2000);

// 繰り返し処理を停止したいとき
window.clearInterval(intervalId);

clearInterval()のパラメータには、停止対象となるタイマーのIDを指定します。このようにIDを管理しておくことで、不要になった繰り返し処理を確実にキャンセルでき、意図しない動作やメモリリークの発生を防ぐことができます。