JavaScriptで一定間隔で処理を繰り返す setIntervalの完全ガイド

2023.08.17

JavaScriptのsetInterval関数を使用すると、特定の時間間隔で定期的にコードを実行することができます。この記事では、setIntervalの基本的な使い方から、インターバルを停止する方法まで、詳しく解説します。

スポンサーリンク

setIntervalの基本

setIntervalは、2つの引数を必要とします。

  1. 実行したい関数：第一引数には実行したい関数を指定します。
  2. 実行間隔：第二引数には、関数を実行する間隔をミリ秒単位で指定します（1000ミリ秒 = 1秒）。
function sayHello() {
  console.log('Hello, world!');
}

let intervalId = setInterval(sayHello, 2000);

この例では、2秒ごとにsayHello関数が実行され、”Hello, world!”とコンソールに出力されます。

インターバルでカウンターを実装する

setIntervalは、カウンターのような連続的な動作を実装する際にも非常に役立ちます。

let count = 0;

function countUp() {
  console.log(count);
  count++;
}

let intervalId = setInterval(countUp, 1000);

ここでは、1秒ごとにcountUp関数を実行し、count変数の値を1ずつ増加させてコンソールに出力します。

インターバルの停止 clearIntervalの使い方

setIntervalはIDを返します。このIDを使用して、clearInterval関数を呼び出すことで、インターバルを停止（クリア）することができます。

let count = 0;

function countUp() {
  console.log(count);
  count++;

  if (count >= 10) {
    clearInterval(intervalId);
  }
}

let intervalId = setInterval(countUp, 1000);

この例では、countが10になった時点でインターバルを停止します。

注意点とベストプラクティス

  • setIntervalは、指定された間隔で処理を繰り返しますが、前の処理が終了する前に次の処理が開始される場合があるので注意が必要です。
  • 高負荷な処理をsetIntervalで実行する場合は、システムに負荷をかける可能性があります。この場合、setTimeoutを使って、一定の処理が完了した後に次の処理を実行する方法を検討すると良いでしょう。

よくある質問（FAQ）

Q. setIntervalを確実に停止するにはどうすればよいですか？
A. const id = setInterval(fn, 1000)で返されるIDを保持し、clearInterval(id)で停止します。変数スコープに注意が必要です。コンポーネント/クラスのインスタンスに格納して、破棄時（componentWillUnmount等）にclearIntervalを呼ぶパターンが推奨されます。
Q. setIntervalとsetTimeoutの再帰呼び出しの違いは何ですか？
A. setIntervalは処理時間に関係なく一定間隔で実行します。処理が遅い場合は実行が積み重なる可能性があります。setTimeout再帰は前の処理が終わってから次の実行をスケジュールするため、処理が重くても間隔が保たれます。非同期処理や重い処理には再帰setTimeoutが安全です。
Q. setIntervalの実行回数を制限するにはどうすればよいですか？
A. カウンター変数で管理します：let count = 0; const id = setInterval(() => { if(++count >= 5){ clearInterval(id); return; } 処理; }, 1000);。または初回だけ遅延してN回繰り返すなら再帰setTimeoutで書く方がシンプルです。

まとめ

JavaScriptのsetInterval関数は、一定間隔でコードを繰り返し実行する際に非常に便利です。使い方はシンプルで、関数と実行間隔を指定するだけ。ただし、使い方によってはシステムに負荷をかける可能性もあるので、適切な設計と最適化が重要です。