JavaScriptの非同期処理を理解したい

Question

実現したいこと

JavaScriptの非同期処理を理解したいです。
知っているのは、JavaScriptはシングルスレッドだということです。

私がどこを勘違いしているのか教えていただけると幸いです！

疑問点

疑問点は、下記コードがなぜ合計4秒で終了するのか？ということです。
シングルスレッドなら合計6秒かかるのではないのでしょうか？

シングルスレッドなら2+4=6秒
マルチスレッドなら4秒
という気がします。
つまりsetTimeoutで「待つ」という処理が同時に走っているように思うのです。

setTimeout

function doSample() {
    setTimeout(onFirst, 2000);
    setTimeout(onSecond, 4000);
     
    function onFirst() {
        console.log("first")
    }
     
    function onSecond() {
        console.log("second")
    }
}
doSample();

↓出力結果
first　←2秒後に表示
second ←さらに2秒後に表示
合計で4秒。

非同期処理（Promise）

また、下記コードは合計6秒かかります。
setTimeoutだけが特殊なのでしょうか？

//指定秒後にログ表示
  function waitAsync(time){
    return new Promise(function(resolve, reject) {
        const start = Date.now();
  while(Date.now() - start < time){
    }
  resolve(time);
    });
  }

waitAsync(2000)
 .then((time) => {
   console.log(time)
})

waitAsync(4000)
 .then((time) => {
   console.log(time)
})

↓出力結果
2000　←6秒後に表示
4000 ←上と同時に表示
合計で6秒。

同期処理

下記コードも合計6秒。
ただし、出力に間隔があります。

//指定秒後にログ表示
function wait(time){
  const start = Date.now();
  while(Date.now() - start < time){
    }
  console.log(time);
}

wait(2000);
wait(4000);

↓出力結果
2000　←2秒後に表示
4000 ←さらに4秒後に表示
合計で6秒。

Answer 1

つまりsetTimeoutで「待つ」という処理が同時に走っているように思うのです。

setTimeoutは「待つ」という能動的な処理をしているのではなく、「この時間にこの処理をする」という登録をしているだけです。

Answer 2

setTimeoutは、タイマの設定するだけなので即実行は終了します

setTimeout(onFirst, 2000);

２秒後に実行

setTimeout(onSecond, 4000);

４秒後に実行

ということで、双方ともまったくそのとおりの動作となってますね

Comments

[inumaeda]

ご回答ありがとうございます！
処理は即終了するのですね！
ということは待ち時間をカウントして完了通知を送る、という処理はJavaScriptではない何かがやっているということですね？
それって何なのでしょうか？
もしご存知でしたらお教えください。
よろしくお願いします。

[y_waiwai]

Javascriptがバックで動いていてその時間になったらなんやからうごかすんでしょうね

[inumaeda]

Lhankor_Mhyさんが紹介してくれた
https://coliss.com/articles/build-websites/operation/javascript/javascript-visualized-event-loop.html
によるとWebAPIでタイマーが走っているようです。

Answer 3

こうしてみてはどうでしょうか。

function doSample() {
    setTimeout(onFirst, 2000);
    

    function onFirst() {
        console.log("first");
        setTimeout(onSecond, 4000);
    }

    function onSecond() {
        console.log("second")
    }
}
doSample();

---

参考：
✨♻️ JavaScript Visualized: Event Loop - DEV Community

JavaScript イベントループの仕組みをGIFアニメで分かりやすく解説 | コリス

Answer 4

async function doSample(){
  console.log("start");
  await new Promise(resolve=>{
    setTimeout(()=>{
      resolve();
    }, 2000);
  });
  onFirst();
  await new Promise(resolve=>{
    setTimeout(()=>{
      resolve();
    }, 4000);
  });
  onSecond();
  console.log("end");
  function onFirst() {
    console.log("first");
  }
  function onSecond() {
    console.log("second");
  }
}
doSample();