JavaScript setInterval 一定間隔で処理を繰り返す

JavaScriptのsetIntervalメソッドで、一定間隔で処理を繰り返すサンプルです。

サンプル	一定間隔で処理を繰り返すサンプル
	関数を指定 / 変数を指定 / 関数に引数を渡す
	関数側にsetTimeoutを配置 / アロー関数を使用
	繰り返し処理を停止(clearInterval)

一定間隔で処理を繰り返す(setInterval)

変数 = setInterval (関数名,ミリ秒 [,引数...]);

指定したミリ秒の間隔で関数を繰り返します。1000ミリ秒は、1秒です。
setIntervalメソッドの戻り値は、タイマーを識別する数値を返します。
→繰り返し処理の停止で使用します。
Intervalは、間隔という意味です。

関数を指定

<script>
  function proc1() {
    console.log("1秒経過しました");
  }
  setInterval(proc1, 1000);
</script>

5行目のsetIntervalメソッドは、2行目の関数proc1を引数にしています。
proc1の後ろにかっこ()は不要です。1000ミリ秒(1秒)ごとに実行します。
処理を止める時はブラウザのタブを閉じます。

変数を指定

<script>
  const proc1 = function () {
    console.log("1秒経過しました");
  };
  setInterval(proc1, 1000);
</script>

2～4行目の関数を2行目の変数proc1に代入しています。
5行目のsetIntervalメソッドは、変数proc1を引数にしています。

関数に引数を渡す

<script>
  const proc1 = function (str1) {
    console.log(str1 + "経過しました");
  };
  setInterval(proc1, 1000, "1秒が");
</script>

setIntervalの3つめの引数が関数に渡されます。
引数を増やす場合は、カンマ区切りで増やしていきます。

関数側にsetIntervalを配置

<script>
  const proc1 = function () {
    setInterval(function () {
      console.log("1秒経過しました");
    }, 1000);
  };
  proc1();
</script>

3行目は、関数側にsetIntervalがあります。

アロー関数を使用

<script>
  const proc1 = () => setInterval(() => console.log("1秒経過"), 1000);
  proc1();
</script>

上記の「関数側にsetIntervalを配置」のコードをアロー関数にした場合です。
functionとブロック{}を削除しアロー(=>)を追加しました。

以下はMDNのsetIntervalメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval

繰り返し処理を停止(clearInterval)

clearInterval ( setIntervalの戻り値);

setIntervalメソッドで開始された繰り返し処理を停止します。
引数は、setIntervalメソッドの戻り値です。

<script>
  const proc1 = function () {
    console.log("1秒経過しました");
  };
  const timeoutID = setInterval(proc1, 1000);
  clearInterval(timeoutID);
</script>

5行目は、setIntervalメソッドの戻り値を変数のtimeoutIDに代入しています。
6行目は、clearIntervalメソッドで繰り返し処理を停止します。
結果として3行目の文字列は出力されません。

以下はMDNのclearIntervalメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/clearInterval