JavaScript setInterval()とsetTimeout()の違い

JavaScriptのsetInterval()とsetTimeout()の違いについて，学習した内容を整理した．

構文と機能

setInterval(関数名, 処理間隔) //指定したミリ秒間隔で関数を実行し，値を返す．
setTimeout(関数名, 処理間隔) //指定したミリ秒後にで関数を1度だけ実行し，値を返す．

setInterval()は指定したミリ秒毎に関数を繰り返し実行するのに対して，setTimeout()は指定したミリ秒後に1度だけ関数を実行する．
※それぞれclearIntercal(), clearTimeout()で処理を停止することができる．参考まで．

javascriptサンプルコード　カウントアップ処理

1秒毎にカウントアップ処理（今回は1秒毎に+1した数値を出力）するコードをsetInterval(),setTimeout()それぞれについて作成．

setInterval()を用いて実行する場合

let num1 = 0;
$(function() { 
    function countNum1() {
      num1++;
      console.log(num1);
    };  //+1する関数
    setInterval(countNum1, 1000); //1秒毎にcountNum1()を実行する．
});

setInterval()により1秒毎にcountNum1()が実行され，カウントアップ処理（1秒毎に+1した数値を出力）される．

setTimeout()を用いて実行する場合

let num2 = 0;
$(function countUp() {
    function countNum2() {
      num2++;
      console.log(num2);
    }
    setTimeout(function() {
      countNum2();
      countUp();  //setTimeout()でcountUp()を再帰的に実行する
    }, 1000);
});

setTimeout()内でcountUp()を再帰的に実行することにより，1秒毎にcountNum2()が実行され，カウントアップ処理（1秒毎に+1した数値を出力）される．

参考

https://developer.mozilla.org/ja/docs/Web/API/setInterval
https://developer.mozilla.org/ja/docs/Web/API/setTimeout
https://www.sejuku.net/blog/24425