javascript ｶｳﾝﾄﾀﾞｳﾝﾀｲﾏｰ

Question

(function(){
  'use strict';

  var timer = document.getElementById('timer');
  var min = document.getElementById('min');
  var sec = document.getElementById('sec');
  var reset = document.getElementById('reset');
  var start = document.getElementById('start');
  
  var startTime; 
  var timeLeft;　//残り時間
  var timeToCountDown=4*1000;　//タイマー設定時間
  
  function countDown(){
    setTimeout(function(){
      var elapsedTime=Date.now() - startTime;
      timeLeft = timeToCountDown-(Date.now()-startTime);

      countDown();
    },10)
  }
  
  
  start.addEventListener('click',function(){
    startTime=Date.now();
    
    countDown();
  });
})();

関数が呼び出されている順序がよくわかりません。

まず、一番下のstartボタンをクリックしたらcountDown関数を呼び出していますよね。
そのcountdown関数の中にもcountdown();とcountdown関数を呼び出しています。
一番したのところで、もう呼び出しているのに、なぜcountdown関数内のcountdown();がなぜ必要なのかわかりません。

function countDown(){
   setTimeout(function(){
     var elapsedTime=Date.now() - startTime;
     timeLeft = timeToCountDown-(Date.now()-startTime);
   },10)
 }

このように、countdown();と記載しないのはなぜだめなのでしょうか。

Answer 1

そうでないと、countDownがループしないからだと思います。
setTimeOut関数は、
第二引数に設定したmilliseconds分だけ遅延させて、実行させる関数です。
以下、millisecondsを[ms]と表す。

始めにstartボタンをクリックしてcountDownを発火
10ms待ってcountDown
10ms待ってcountDown
10ms待ってcountDown
この繰り返しです。

Answer 2

fjaiofjawiefjawさんがおっしゃるように、呼び出さないとループしません。
一回だけ呼び出されて終了してしまい、意図した動作にならないのです。