前回に引き続きjsでストップウォッチを作成し、学んだことについて。

setIntervalとsetTimeoutの違い

今回、経過時間を算出する上で、繰り返しDateオブジェクトで時間を呼び出し続ける必要があったが、その際に使用できるものとして、setInterval()とsetTimeout()というメソッドが使用できるらしい。（ほかにもありそうだが）

この似ているメソッドについて調べてみた。

setInterval()メソッド↓↓

WindowOrWorkerGlobalScope ミックスインの setInterval() メソッドは、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出します。これは、インターバルを一意に識別する interval ID を返します。よって clearInterval() を呼び出して、後でインターバルを削除できます。

https://developer.mozilla.org/ja/docs/Web/API/setInterval

setInterval()メソッド↓↓

setTimeout() は WindowOrWorkerGlobalScope ミックスインのメソッド (および Window.setTimeout() の後継) で、時間切れになると関数または指定されたコードの断片を実行するタイマーを設定します。

https://developer.mozilla.org/ja/docs/Web/API/setTimeout

setIntervalは上記の通り、一定の時間ごとに繰り返しで関数を呼び出すことが出来るメソッドで、setTimeoutは時間が来たら一回だけ、関数を呼び出すことが出来るらしい。

繰り返し構文の中であれば、一度のみ呼び出すsetTimeoutを使用した方が良さそう。

今回実際使用したメソッドは

ちなみに今回使用した関数は以下の通りで、このように繰り返される関数の中での定義だったので、setTimeout()メソッドを使用した。

 function counter() {
        let time = new Date(Date.now() - startTime + elapsedTime);
        const minutes = (("00" + time.getMinutes()).slice(-2));
        console.log(minutes);
        const seconds = (("00" + time.getSeconds()).slice(-2));
        console.log(seconds);
        const milliseconds = (("000" + time.getMilliseconds()).slice(-3));
        console.log(milliseconds);
        //innerHTMIでも可能（innerHTMLはテキストを文字列として解釈する）
        timer.textContent = `${minutes}:${seconds}:${milliseconds}`
        countUp_id = setTimeout(() => {
            counter();
        }, 10);
    }

以上。setIntervalとsetTimeoutの使い分けについて学びました。