JavaScript/setInterval

setInterval()は、JavaScriptにおいて、指定された時間間隔（ミリ秒単位）で関数またはコードスニペットを繰り返し実行するためのメソッドです。アニメーション、タイマー、ポーリングなどの反復処理に広く使用されます。

概要

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

構文

let intervalId = setInterval(func|code, delay, [arg1], [arg2], ...);

• func|code: 繰り返し実行する関数またはコードの文字列。関数を指定することが推奨されます。
• delay: 繰り返し間隔（ミリ秒単位）。
• arg1, arg2, ...: 関数に渡す引数（省略可能）。

戻り値

setInterval()はインターバルIDを返します。このIDは、後でclearInterval()を使用してインターバルを停止するために使用できます。

解説

setInterval()は非同期的に動作します。最初に指定された遅延時間の後に関数が実行され、その後は指定された間隔で繰り返し実行されます。

例1

関数を繰り返し実行

function showTime() {
  const now = new Date();
  console.log(now.toLocaleTimeString());
}

const intervalId = setInterval(showTime, 1000); // 1秒ごとにshowTime()を実行

// しばらくしてからインターバルを停止する場合
setTimeout(() => {
  clearInterval(intervalId);
  console.log("インターバルが停止されました");
}, 5000); // 5秒後にインターバルを停止

このコードでは、1秒ごとに現在の時刻がコンソールに表示されます。5秒後にはclearInterval()が実行され、インターバルが停止します。

例2

コード文字列を実行 (非推奨)

setInterval("console.log('これはコード文字列で繰り返し実行されます');", 2000); // 2秒ごとに実行

コード文字列の実行はeval()と同様にセキュリティ上のリスクがあるため、関数を使用することを強く推奨します。

例3

引数を渡す

function greet(name) {
  console.log("Hello, " + name + "!");
}

setInterval(greet, 3000, "World"); // 3秒ごとにgreet("World")を実行

この例では、3秒ごとに「Hello, World!」とコンソールに表示されます。

インターバルの停止 (clearInterval())

setInterval()で設定したインターバルは、clearInterval()を使用して停止できます。

構文

clearInterval(intervalId);

例

上記の例1で示されているように、clearInterval()にsetInterval()が返したインターバルIDを渡すことで、インターバルを停止できます。

注意点

• setInterval()は、指定された間隔で正確に実行されることを保証するものではありません。もし関数の実行時間が間隔よりも長い場合、関数の実行が重なり合う可能性があります。このような場合は、setTimeout()を再帰的に使用することで、関数の実行が完了してから次の実行をスケジュールする方法が推奨されます。
• setInterval()は、ページを離れたりブラウザを閉じたりしても、バックグラウンドで実行され続ける可能性があります。不要になったインターバルは必ずclearInterval()で停止するように心がけましょう。

setTimeout()との比較

setInterval()は一定間隔で繰り返し関数を実行するのに対し、setTimeout()は指定された時間後に一度だけ関数を実行します。繰り返し処理を行う場合はsetInterval()、遅延実行を行う場合はsetTimeout()を使用します。

まとめ

setInterval()はJavaScriptで時間ベースの反復処理を行うための重要なツールです。アニメーション、タイマー、ポーリングなど、様々な用途に活用できます。ただし、適切なタイミングでclearInterval()を使用してインターバルを停止することを忘れないようにしましょう。

関連項目

• setTimeout(): 指定した時間後に一度だけ関数を実行します。
• clearTimeout(): setTimeout()で設定したタイマーをキャンセルします。
• clearInterval(): setInterval()で設定したインターバルをキャンセルします。