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

setIntervalで一定間隔で処理を繰り返すサンプルです。

サンプル	一定間隔で処理を繰り返す(setInterval)
	setIntervalのサンプル
	関数に引数を渡す場合
	関数側にsetIntervalを配置
	アロー関数を使用

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

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

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

setIntervalのサンプル

開始ボタンを押すと1秒ごとに文字列が出力されます。
停止ボタンを押すと定期処理が停止します。

<input type="button" value="開始" onclick="clickBtn1()" />
<input type="button" value="停止" onclick="clickBtn2()" />
<script>
  let timer1;
  function clickBtn1() {
    if(timer1){
      clickBtn2();
    }
    timer1 = setInterval(proc1, 1000);
  }
  proc1 = function () {
    console.log("1秒経過しました");
  };
  function clickBtn2() {
    clearInterval(timer1);
  }
</script>

9行目のsetIntervalメソッドは、11行目の関数proc1を引数にしています。
proc1の後ろにかっこ()は不要です。1000ミリ秒(1秒)毎に実行します。

clearInterval (setIntervalの戻り値)

15行目のclearIntervalメソッドは、setIntervalメソッドで開始された処理を停止します。
引数は、setIntervalメソッドの戻り値です。
6,7行目はすでにタイマーが動いていたときは停止します。

関数に引数を渡す場合

<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