関数についてお聞きしたいです

Question

function blockTime(timeout) { 
    const startTime = Date.now();
   
    while (true) {
        const diffTime = Date.now() - startTime;
        if (diffTime >= timeout) {
            return; 
        }
    }
}
console.log("処理を開始");
blockTime(1000); 
console.log("この行が呼ばれるまで処理が1秒間ブロックされる");

こちらは11行目が呼ばれてから1秒後に13行目が呼ばれる関数のようですが、この仕組みが理解できないです。
まず5行目のDate.now() - startTimeの値が０にならないことについてです。
2行目にconst startTime = Date.now()と記されているのでdiffTimeの値は0たと思うのですが、試しにコンソールにdiffTimeを出力したら無限ループが起きてしまい、０ではありませんでした。なぜこのような挙動になるかご教授願いたいです。

また7行目のreturnが何を意味しているか分からないので教えていただけますでしょうか？
よろしくお願いします。

Answer 1

このようなコードは、ブラウザ内で書くべきではありません。while(true)でループする間、ブラウザはJavaScriptの実行に専念するようになり、ユーザー入力を認識しない状態に陥ります。

setTimeoutなどを使いましょう。

Answer 2

Dat.now() は呼ばれるたびに違う値を返す（現在時刻を返す）、「副作用」のある関数と呼ばれます。副作用があるとこのように理解が難しくなるんですね。副作用には他に乱数、画面への出力、キーボードからの入力などなど、プログラミングの世界の外からやってくるもの全てが副作用です。時刻もそうですよね？

それから = というのはわかりにくいんですが、数学の = と同じではありません。これは代入を意味していて x = y は x に y を入れるぞ、という意味です。そのあと y が変わろうが知ったことではありません。これで Date.now() - startTime が 0 にならない理由がおわかりいただけたでしょうか。

最後に、return ですがこれは大域脱出と呼ばれる命令の一つです。もしこれがなければ回りくどい書き方をしなければいけません。

function blockTime(timeout) { 
    const startTime = Date.now();
    let cond = true;

    while (cond) {
        const diffTime = Date.now() - startTime;
        if (diffTime >= timeout) {
            cond = false; 
        }
    }
}

また、JavaScript において return は値を返すという役割も果たしています。

function addXY(x, y){
    return x + y;
}

console.log(addXY(1, 2)) // 3

以上が上記のコード + α の解説でした。上記のコード、良くないんですけどね！

Comments

[cheetoi]

A_kirisakiさん、わかりやすく解説していただきありがとうございます！
私の質問の仕方が間違っておりまして、startTimeも時間が経過するごとに変化するものと誤解していて
永遠に差は縮まらないと思い込んでおりました。(Date.now() - Date.now())←昨日までの認識
またreturnの意味については非常に参考になりました。必ずしも何かを返している訳ではないのですね。
ご丁寧にありがとうございました！

Answer 3

while(true)するならworkerのような処理が必要でしょう
setIntervalで十分な気もしますが・・・

Answer 4

2行目にconst startTime = Date.now()と記されているのでdiffTimeの値は0たと思うのですが

...

０ではありませんでした。なぜこのような挙動になるか

Date.now()は呼んだときの時刻を返すので、呼ぶたびに値が変わります。

また7行目のreturnが何を意味しているか分からない

そこで関数を抜けます。

Comments

[cheetoi]

ozwkさん、回答ありがとうございますm(_ _)m
理解が追いつかず申し訳ありません、Date.now()とstartTimeの値は異なるとの認識で合っておりますでしょうか？仮にその前提でdiffTimeに代入されたとして、なぜtimeout以上の値になる(関数を抜ける)か解説しもらうことは可能でしょうか？
私が思ったことはdiffTimeが０とは異なる値から始まったとして、そこから値が変動するのであれば、なぜそのような挙動になるのかとの事です。
上手く説明できずすみません、またお時間ございましたらお願いします。

[maisumakun]

> 理解が追いつかず申し訳ありません、Date.now()とstartTimeの値は異なるとの認識で合っておりますでしょうか？

最初は一致していますが、時間が進めば当然違ってきます。

> 仮にその前提でdiffTimeに代入されたとして、なぜtimeout以上の値になる(関数を抜ける)か

時間が経過していけば、差は広がる一方です。

> diffTimeが０とは異なる値から始まったとして

いえ、最初は0です。

[maisumakun]

Date.now()は、数学的な関数と違って、「実行したタイミングによって結果が変わる」関数です。一方で、startTimeの値は最初に書き込まれたきりで、時間を置いても変化しません。

[cheetoi]

maisumakunさん、ご丁寧に書いていただきありがとうございます。
>startTimeの値は最初に書き込まれたきりで、時間を置いても変化しません。
startTimeも時間が進めば変化すると思い込んでしまい差は縮まらないと詰んでおりましたが
こちらの解説で理解することができました。
私の自身の誤解に気づいていただき本当にありがとうございます！