普段からよく使うsetIntervalとsetTimeoutについてメモ。

setIntervalのようなループ処理を、setTimeoutを使って書くことも可能です。

setIntervalを使った場合

function loop(){
  console.log('loop!');
}

setInterval(loop,1000);

setTimeoutを使う場合はループさせたい関数の中で、setTimeoutをつかって同じ関数を呼び出せば繰り返しになります。

setTimeoutを使った場合

function loop(){
  console.log('loop!');
  setTimeout(loop,1000);
}

ただ二つのループには違いがあります。 setIntervalはきっちりと○秒ごとにループしてくれるのに対して、setTimeoutは何度も繰り返し使用されると遅延が発生する場合があります。 setTimeoutには最小遅延というものがあってHTML5の標準仕様では4msだそう。 これより早く処理を連続させても、4msの遅延が発生する。 またページやブラウザの他のタスク処理に時間がかかると遅延が発生します。

参考 window.setTimeout - Web API インターフェイス | MDN

なのできっちりとループはsetInterval、しっかりと処理をしてから次を実行する場合はsetTimeoutとういう使い分けがよさそうです。

関連リンク

window.setTimeout - Web API インターフェイス | MDN window.setInterval - Web API インターフェイス | MDN