いまさらJavascriptの非同期処理について

PHP8.1で非同期処理が書ける様になったので、JavaScriptの非同期処理について、スタック、キュー、イベントループなどの言葉を使わないで説明します。

// 素数を割り算で求める計算だけをする実行に時間のかかる関数
function sleep(){
  for(let i= 2; i<100000; i++){
    for(let j = i - 1; j > 1; j--){
      if(i % j === 0){
        break;
      }
    }
  }
  console.log('おしまい');
}

// 0.1秒後, 0.2秒後に表示されるのを期待している
setTimeout(()=>{console.log('setTimeout!200')}, 200);
setTimeout(()=>{console.log('setTimeout!100')}, 100);

sleep();

上記コード実行するとマシンのパワーにもよりますが５秒くらいたってから

setTimeout!100
setTimeout!200

と表示されます。0.1秒後と0.2秒後に表示したかったのに･･･。

登場人物は「ブラウザ」、「JSを実行する場所」、「順番待ち列」

setTimeoutはブラウザの役割です。これがポイントです。
JSの関数の実行順序は以下の通り。

1. JavaScriptのコードは書かれている順に順次「JSを実行する場所」で実行されていく。
2. 順次実行するコードにsetTimeoutがあったら、setTimeoutの中の関数を実行しないで「ブラウザ」に渡す。
3. ブラウザは指定された時間になったら「順番待ち列」に受け取った関数を入れる。
4. 「JSを実行する場所」は引き続きコードを実行していっている。実行するコードがなくなったら、関数は「順番待ち列」から「JSを実行する場所」へ入ることができる。
5. 「JSを実行する場所」で関数が実行される。

上の方で書いたプログラムだと、ブラウザはsetTimeoutで渡された関数を100ms, 200ms後に「順番待ち列」に入れたんだけど、その関数たちはsleep();が終わるまでを「JSを実行する場所」に入れなかったという事です。

setTimeoutはブラウザの役割と書きましたが、例えば、ボタンをクリックしたときに関数を「順番待ち列」に入れるのもブラウザの役割です。