カウントアップの処理の仕組みの疑問(JavaScript)

Question

JavaScriptでのカウントアップの処理についての疑問なのですが、

let startTime;//スタートを押した時刻


function countUp(){
    
console.log(Date.now() - startTime);

setTimeout(() => {
countUp();
},10);

};


start.addEventListener('click',() => {
startTime = Date.now();
  
countUp();
});

上記でstartをクリックして、時間差がなぜ出力されるのか仕組みが分かりません。

startTime = Date.now();
と記述することによって、Date.now()とstartTimeが同等になっていると思ったので、
**「Date.now() - startTime」**という計算を書いても、差が生まれず0になるのではと
個人的に思ったのですが、どうなのでしょうか？
クリックしてから微妙な差が生まれているのでしょうか？

Answer 1

setTimeoutの第2引数で指定された10(単位ミリ秒)経過すると、第1引数のラムダ式の中で指定されたcountUpが実行されます。Date.now()が実行されると、その時点の日時に換算できる数値が得られます。
一方、startTimeの値は、クリック時の=で代入されたDate.now()の実行結果の値で、再度クリックするまで変化しません。

Comments

[ylc]

やっと理解出来ました。

ご回答ありがとうございました。

Answer 2

startTime = Date.now();
で入れているのはclickの時だけで

start.addEventListener('click',() => {
  startTime = Date.now();
  countUp();
});

あとはstartTime を置き去りにして10msごとにcountUp()が実行されるから。

function countUp(){

  console.log(Date.now() - startTime);

  setTimeout(() => {
    countUp();
  },10);

};

Comments

[ylc]

ご回答ありがとうございます。

Date.now()がstartTimeを置き去りに出来ているのは最初の方でlet = startTime;としたからで、
const = startTime;としたら値が変化せず「Date.now() - startTime」の式に差が生まれない、
という認識で合っていますでしょうか？

[maisumakun]

そもそも、「const startTime;」という宣言自体が行なえません（宣言時点で値を与える必要があります）。

[sousuke]

あ～そういうことか、Daregadaさんの回答みて理解。
startTime = Date.now()
の意味のとり方が違います。「startTime」に入っているのは「現在日時（Date.now()）」という概念が入るわけじゃないです。「実行したときの日時」が値で入ります。言い方難しい…
例えば今日の9時50分30秒に「startTime = Date.now()」実行したら
「startTime = '2020-6-18 9:50:30'」みたいな感じの一つの『値』で入っています。

[ylc]

startTimeには実行した時の値そのものが入っているという意味なのですね。

理解出来ました。
ご回答ありがとうございました。