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

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を使って、一定の処理が完了した後に次の処理を実行する方法を検討すると良いでしょう。

まとめ

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