setIntervalとsetTimeoutの違い

Javascriptで使用されるsetIntervalメソッドとsetTimeoutメソッドについてまとめてみます。

setInterval

setInterval()メソッドは、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出します。

（MDNより）

setInterval(関数名, 実行間隔(ミリ秒で指定));

指定した間隔ごとに関数を実行してくれるメソッドです。
setIntervalを利用してコンソールに１秒間隔で時間を表示させる

'use strict';

  function showTime() {
    console.log(new Date());
  }

  setInterval(showTime, 1000);

もし処理をとめたい場合はclearIntervalメソッドを使うことで止めることが可能です。

setTimeout

時間切れになると関数または指定されたコードの断片を実行するタイマーを設定します。
（MDNより）

setIntervalとの違いはsetIntervalは指定間隔ごとに実行され続けるのに対して、setTimeoutは指定した関数が１回のみ実行されます。

setTimeout(関数名, 実行時間(ミリ秒で指定));

1秒後に１回だけコンソールに時間を表示する

'use strict';

  let i = 0;

  function showTime() {
    console.log(new Date());
   
  }
  setTimeout(showTime, 1000);
  

setTimeoutを使用してsetIntervalのように繰り返し関数を実行することも可能です。

'use strict';

  function showTime() {
    console.log(new Date());
    setTimeout(showTime, 1000);
    }
  }

  showTime();

関数の中にsetTimeoutを含めることでsetIntervalと同じく繰り返し関数が実行されます。
こちらもclearIntervalメソッドを使うことで止めることが可能です。

関数を繰り返し実行したい時には、どちらのメソッドを使えばいいのか

繰り返し処理を実行したい時にはどちらのメソッドを使えばいいのでしょうか？
上記で登場した２つのメソッドには繰り返し処理における開始のタイミングに違いがあります。

• setIntervalでの繰り返し処理
  処理にかかる時間に関係なく指定した秒数ごとに関数が実行される。

• setTimeoutでの繰り返し処理
  関数が終了してから指定した秒数後に関数が実行される。

具体的に例を出してみてみます。（ミリ秒だと頭がこんがらがるので秒で例を出します。）
例えば処理に1.2秒かかると仮定して、実行間隔を1秒にするとします。
この場合、setIntervalで指定をすると0.2秒分の処理が終わっていない段階で次の関数が実行されてしまうことになります。
ですが、setTimeoutにした場合は1.2秒かかる処理が全て終わってから1秒後に次の関数が実行されます。

処理の量が増えると、負担もその分大きくなってしまう可能性があるため、うまく使い分けることが大切ではないでしょうか。

以上、setIntervalとsetTimeoutの違いでした！！