9.3 setTimeout 命令
JavaScript で非同期処理を体験するために最もよく使われるのが setTimeout 命令です。これは、「指定した時間（ミリ秒）が経過した後に、処理を実行する」というものです。とはいえ setTimeout は、単に指定した時間だけ遅れて処理をする実行だけですので、現実には中々使いどころが少ないかもしれませんが、非同期処理を体感する意味でプログラムを実行してみてください。
9.3.1 setTimeout 命令を実行するプログラム
setTimeout 命令を使って、非同期処理を実現してみます。
ソースフォルダ：public/ch09
ファイル名：delay.js
➢ delay.html
前の章で作った ch07/class-inheritance.html をコピーし、ch09 にペーストしてください。
その際に、ファイル名を delay.html に変更します。ファイル内の class-inheritance.html や class-inheritance.js の記述も、delay.html や delay.js に修正します。
➢ delay.js
// delay.js
alert("1. 処理を開始します。");
// 2秒（2000ミリ秒）後に実行する非同期処理
setTimeout(() => {
alert("2. 2秒経ちました！（非同期処理の実行）");
}, 2000);
alert("3. 最後の行の処理です。");
実行結果
解説
このプログラムは、アラートが出る順番に注目してください。
まず 3 行目の処理がコールスタックに入り、即座に実行され「1. 処理を開始します。」と表示されます。
処理が完了するとコールスタックからは削除されます。
次に 6 行目の setTimeout がコールスタックに入ります。この関数は、「2 秒待ってから処理を実行する」という作業を予約し、ブラウザの裏側の API に預けて、コールスタックから消えてしまいます。
指定されていたコールバック関数は、まだ実行されません。
プログラムは 2 秒経つのを待たずに、すぐに次の行へ進み、10 行目の処理がコールスタックに入り、「3. 最後の行の処理です。」の方が先に表示されます。この段階でメインのプログラムの同期処理はすべて完了し、コールスタックは空になります。
裏側で 2 秒が経過すると、予約されていたコールバック関数が、実行待ちとしてタスクキューに追加されます。
イベントループは「常にコールスタックが空であるか」を監視していますが、メインのプログラムが全て実行され、コールスタックが空になったことを確認すると、タスクキューから待機していたコールバック関数を取り出し、コールスタックへ移動させます。
コールバック関数内の処理が実行され「2. 2 秒経ちました！」が表示されます。
処理が完了すると、コールバック関数もコールスタックから削除されます。
このように、後の処理を追い越して実行されるのが非同期処理の特徴です。