[JavaScript]タイマー機能つけたくない？

タイマー機能で使うメソッド

主に、setInterval()メソッドと、setTimeout()メソッドがあります。
似てますが、少し違うメソッドなので使い分けていけましょう！

setInterval()メソッド

setIntervalは第一引数に与えられた関数を、第二引数に与えられた間隔で実行します。指定した時間ごとに何度も動作させたい時に使います。

// iが２を超えるまでshowTimeメソッドを1秒ごとに繰り返す。
{
  let i = 0;

  function showTime() {
    console.log(new Date());
    i++;
    if (i > 2) {
    //clearIntervalで指定することで、setIntervalの処理を好きなタイミングでストップ出来る
      clearInterval(intervalId);
    }
  }

  const intervalId = setInterval(showTime, 1000);
}

setTimeout()メソッド

setTimeout()メソッドは、関数が実行されてから関数内で指定した時間の分だけ時間が経過した後に、特定の動作をさせたいという場合に使うことができるメソッドです。

// iが２を超えるまでshowTimeメソッドを1秒ごとに繰り返す。
  let i = 0;

  function showTime() {
    console.log(new Date());
    const timeoutId = setTimeout(showTime, 1000);
    i++;
    if (i > 2) {
      clearTimeout(timeoutId);
    }
  }

  showTime();

違いは？？

指定した時間ごとに繰り返したいとき→setInterval()メソッド
関数が終わってから指定した時間経過後に関数を繰り返す→setTimeout()メソッド

まとめ

たとえば、WEBページが画面上に表示されてからすぐではないタイミングでアラートを表示させたいというときに、出したいタイミングのミリ秒を2つめの引数に設定するときです。
または、サーバーなどに登録されているステータスが更新されるのを待っているというときにも使えます。数秒後にリロードさせるために、setTimeoutを使って再読み込みし、サーバー側の最新の状態を確認することができるようになります。
さらに、ある一定の時間経過したらログアウトさせたいというときにも、この関数を使うとよいでしょう。途中で、画面の操作が入力されたらタイマーをキャンセルして、もう一度最初からタイマーをカウントさせるということもできます。
setIntervalを使うタイミングは、スライドショーなど、画面上に表示させてあるものを変更したり動かしたりするときによく使われます。clearIntervalで停止させない限りずっと同じ間隔で画像の変更というプログラムを実行しているので、スライドショーのように動いてくれるのです。

使いどころはたくさんあるので使ってみましょう！！！