【JavaScript】タイマー機能setInterval,setTimeoutの使い方

setIntervalは間隔を設定、setTimeoutは指定時間後に終了する
両者とも書き方次第で、Nミリ秒後まで実行とタイマー操作ができる。

setInterval

・setInterval(実行する関数名, 実行間隔ミリ秒)：タイマーの間隔(interval)をセット(set)する
・clearInterval(setIntervalを渡した定数、変数)：setIntervalの処理を停止する

    {
        let i = 0;//カウンタ用の変数i

        function showTime(){//現在時刻を取得・表示するshowTime関数
            console.log(new Date());//現在時刻を表示
            i++;
            if(i>2){//2＝2000ミリ秒後に停止
                clearInterval(intervalId);
            }
        }
        const intervalId = setInterval(showTime, 1000); //showTime関数を1000ミリ秒ごとに実行
    }

setTimeout

・setTimeout(実行する関数名,ミリ秒後に実行)：指定した時間の後に1回だけ実行する
・clearTimeout(setTimeoutを渡した定数、変数)：setTimeoutの処理を停止する
functionの外にshowTime()を実行することでsetIntervalの例と同様に循環処理をしている

    {
        let i = 0;//カウンタ用の変数i

        function showTime(){//現在時刻を取得するshowTime関数
            console.log(new Date());//現在時刻を表示
            const timeoutId = setTimeout(showTime,1000);//1000ミリ秒後にshowTime関数を停止する
            i++;
            if(i > 2){
                clearTimeout(timeoutId);
                }
            }

        showTime();//showTimeを実行する（繰り返す）
    }

setIntervalとsetTimeoutを使った循環処理の違い

A.setIntervalは間隔を指定して実行
B.setTimeoutは終了タイミングから実行

Aの場合だと処理内容に時間がかかった場合でも間隔で実行するため、前の処理を実行中でも等間隔で次の処理を行ってしまう。
Bの場合だと終了を起点に次の処理を実行しているため、前の処理と重なることがない。