JS基礎 setTimeoutとsetInterval

こんにちは。
ドットインストールにてJavaScriptの学習(テックキャンプの復習を兼ねて)を現在も続けております。
本日は、JavaScript(JS)のsetTimeoutとsetIntervalについて、頭で同一のものと認識してしまっているので、
自分の整理のためにもこちらに記載いたします。

setTimeoutとsetIntervalの共通点

・時間の経過に関わる関数である。
・どちらの関数も第一引数が実行する関数、第二引数が実行までの時間（ミリ秒）を表す。

setTimeout

タイマーとしての役割。非連続。
基本的には、一度関数が実行されればそれでタイマーは止まる。

const fn = function() {
  console.log("1秒経過");
};
const tm = 1000;
setTimeout(fn,tm);

上記を入力する事で、1秒後に出力される。

コンソール出力結果

※clearTimeout
途中でタイマーを止めたい場合は、こちらを使用する。
引数にsetTimeoutの返り値をいれる。

setInterval

連続的にタイマーを始動させる。

const fn = function() {
  console.log("1秒経過（" + i + "回目）");
  if(i > 5) clearInterval(id);
  i++;
}
const tm = 1000;
let i = 1;
const id = setInterval(fn,tm);

※clearInterval
連続艇に行われる動作を止める。
for文とセットで使うことが多い。

コンソール出力結果

出力できました。
タイマーをHPに組み込む時に意識したいですね。