JavaScriptのsetTimeout()とsetInterval()の違いとは？使い分けのポイントを解説

setTimeout()とsetInterval()の基本的な違い

JavaScriptには、処理を遅延させて実行するためのタイマー関数としてsetTimeout()とsetInterval()が用意されています。どちらも指定した関数を遅れて実行する点は共通していますが、実行回数に大きな違いがあります。

setTimeout()とは：指定時間後に1回だけ実行

setTimeout(function, duration)は、現在時刻からdurationミリ秒が経過した後に、指定した関数を1回だけ呼び出す関数です。一度実行されたら、それで終了します。

以下の例では、2000ミリ秒（2秒）待機した後、コールバック関数としてalert('Hello')が一度だけ実行されます。

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

setInterval()とは：指定間隔で繰り返し実行

setInterval(function, duration)は、durationミリ秒ごとに指定した関数を繰り返し呼び出す関数です。停止処理を行わない限り、無制限に実行が続きます。

以下の例では、2000ミリ秒ごとにalert('Hello')が表示されます。1回きりではなく、解除するまで継続的に実行される点がsetTimeout()との決定的な違いです。

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

違いを一覧で比較

タイマーを解除する方法

setTimeout()で設定したタイマーはclearTimeout()で、setInterval()はclearInterval()で解除できます。タイマー関数は呼び出し時にIDを返すので、それを変数に保存して利用します。

const timerId = setInterval(function() {
  console.log('繰り返し実行中');
}, 2000);

// タイマーを停止したいとき
clearInterval(timerId);

使い分けのポイント

遅延処理やアニメーションの開始など、一度だけ実行すればよい処理にはsetTimeout()を、時計表示や定期的なデータ更新など、一定間隔で繰り返したい処理にはsetInterval()を使用するのが基本です。用途に応じて適切に使い分けることで、意図した動作を効率的に実装できます。