概要
非同期処理のメソッドであるsetTimeoutを用いて、そのメソッドと非同期処理其の物について、まとめ、記述します。
setTimeoutについて
JavaScriptの非同期処理の一つにsetTimeoutというメソッドがあります。このメソッドは、指定した時間が経過した後に指定した関数を非同期に実行します。
第1引数に関数、第2引数に時間をとります。
setTimeout(() => {
console.log('hoge');
}, 1000);
この例では、1秒後（1000ミリ秒後）にconsole.log('hoge')が非同期に実行されます。
setTimeoutの戻り値とタイマーのキャンセル
setTimeoutメソッドは、設定したタイマーのID番号を返します。このID番号を使ってclearTimeoutメソッドで特定のタイマーをキャンセルできます。
const timerId_A = setTimeout(() => {
console.log('A hoge?');
}, 1000);
console.log('timerId_A = ' + timerId_A);
clearTimeout(timerId_A);
このコードでは、setTimeoutで設定したタイマーがすぐにキャンセルされるため、タイマーに登録した関数は呼び出されません。
非同期処理の実行順序とイベントループ
JavaScriptの実行環境（ブラウザやNode.js）には「イベントループ」と呼ばれる仕組みがあります。このイベントループが非同期処理のスケジューリングと実行順序を管理しています。
同期処理は上から順次で実行されます。一方、非同期処理はイベントループを介して遅延実行されます。ここでの「遅延」とは時間的な遅れだけではなく、全ての同期処理が完了するまで待つという意味も含んでいます。
console.log('A');
setTimeout(() => {
console.log('B');
}, 0);
console.log('C');
上記のコードを実行すると、「A」、「C」、「B」の順番で出力されます。setTimeoutメソッドの遅延時間が0ミリ秒に設定されているにもかかわらず、「B」は最後に実行されます。これはなぜでしょうか。
これは、setTimeoutに渡された関数（ここではconsole.log('B')）が同期的に実行されるのではなく、非同期的に実行されるからです。この非同期処理はイベントループの「タスクキュー」に追加され、すべての同期処理が完了した後（すなわち、console.log('C')が実行された後）、イベントループによって処理されます。
非同期処理がタスクキューに追加されると、イベントループは現在実行中のタスクが完了するのを待ちます。すべてのタスクが完了したら（つまり、スタックが空になったら）、イベントループはキューから次のタスクを取り出し、そのタスクを実行します。これが非同期処理が他の同期処理が全て完了した後に実行される理由です。
まとめ
JavaScriptの非同期処理は、長時間かかるタスクを待つ間に他のタスクを処理することが可能になります。JavaScriptは基本的にシングルスレッドであり、非同期処理がなければ長いタスクが終わるまで他のタスクが待たされることになります。しかし非同期処理により、待つ間に他のタスクを実行することができます。また、サーバからの応答待ちなど、一部の操作が完了するまで待機し、その後で特定の操作を実行する場合に特に有用です。