setIntervalとsetTimeoutの違いは？

JavaScriptで非同期処理を行う際に使用する関数として、`setTimeout`と`setInterval`があります。どちらも指定時間後に処理を実行しますが、その動作には違いがあります。この記事では、`setTimeout`と`setInterval`の違い、それぞれの関数の実用例、使い分けのポイントについて解説していきます。

setTimeout：指定時間後に一度だけ関数を実行

`setTimeout`関数は、指定時間後に一度だけ関数を実行します。タイマーのようなイメージです。文法は以下の通りです。

setTimeout(function, milliseconds);
  • **function**: 実行したい関数。無名関数も指定可能です。
  • **milliseconds**: 実行を遅延させる時間（ミリ秒単位）。

setTimeoutの使用例

3秒後にメッセージを表示する例です。

<script>
  function showMessage() {
    alert('3秒が経過しました！');
  }

  setTimeout(showMessage, 3000); // 3000ミリ秒 = 3秒
</script>

setInterval：指定間隔で繰り返し関数を実行

`setInterval`関数は、指定した間隔で繰り返し関数を実行します。一定時間ごとに処理を繰り返したい場合に便利です。文法は以下の通りです。

setInterval(function, milliseconds);
  • **function**: 実行したい関数。無名関数も指定可能です。
  • **milliseconds**: 実行間隔の時間（ミリ秒単位）。

setIntervalの使用例

1秒ごとにカウントアップする例です。

<p id="counter">0</p>
<script>
  let count = 0;
  const counterElement = document.getElementById('counter');

  setInterval(() => {
    count++;
    counterElement.textContent = count;
  }, 1000); // 1000ミリ秒 = 1秒
</script>

setTimeoutとsetIntervalの違い

`setTimeout`と`setInterval`の違いを表にまとめました。

機能 setTimeout setInterval
実行回数 1回 指定間隔で繰り返し
タイマー停止 clearTimeout() clearInterval()

使い分けのポイント

  • 一度だけ処理を実行したい場合は `setTimeout` を使用する。
  • 一定時間ごとに処理を繰り返したい場合は `setInterval` を使用する。
  • `setInterval` は処理が完了する前に次の処理が開始される可能性があるため、注意が必要です。処理が重なってしまう場合は、`setTimeout` を使用して、処理が完了してから次の処理をスケジュールするようにしましょう。

参考資料

関連QA

Q1: setTimeoutやsetIntervalで指定した時間に処理が実行されないことはありますか？

A1: はい、あります。JavaScriptはシングルスレッドで動作するため、他の処理が実行されている場合は、setTimeoutやsetIntervalで指定した時間に処理が実行されないことがあります。特に、複雑な処理や重い処理が実行されている場合は、注意が必要です。

Q2: setIntervalを停止するにはどうすればよいですか？

A2: `clearInterval()` 関数を使用します。`setInterval()` の戻り値を `clearInterval()` 関数に渡すことで、タイマーを停止できます。

const timerId = setInterval(myFunction, 1000);

// タイマーの停止
clearInterval(timerId);

Q3: setTimeoutやsetIntervalで実行する関数に引数を渡すことはできますか？

A3: はい、できます。`setTimeout()` や `setInterval()` の第3引数以降に、実行する関数に渡す引数を指定できます。

function myFunction(arg1, arg2) {
  console.log(arg1, arg2);
}

setTimeout(myFunction, 1000, 'Hello', 'World!');

その他の参考記事:jquery setinterval