同期(Synchronous)

コードは、1つの演算が完了した(要求が送信された後に応答される)後にのみ実行されます.すべてのタスクが順番に行われ、タスクが実行されている場合は、次のタスクが待機します.

console.log("1st"); // #1

console.log("2nd"); // #2

console.log("3rd"); // #3

上記のコードを作成して実行します.

1st // #1

2nd // #2

3rd // #3

コンソールにこれらの結果が表示されます.
このようなコードを順次実行する方式を同期処理方式と呼ぶ.

非同期

これは,特定のコードの演算が終了するのを待たずに,次のコードを直接実行する方式である.応答のステータスに関係なく、次の操作を実行できます.

console.log("1st"); // #1

setTimeout(()=> { console.log("2nd"); }, 0); // #2

console.log("3rd"); // #3

同期処理の解釈とは異なりsettimeout()メソッドを用いた.settimeout()の最初のパラメータはコールバック関数であり、2番目のパラメータは遅延時間である.上記の場合、遅延時間は0として指定されるので、遅延することなく即時運転を予測することができる.また,settimeout()メソッドが非同期Web APIを理解していない場合,コンソールが1,2,3の順に出力すると予測できる.しかし、settimeout()は非同期Web APIであるため、0秒の遅延が入力されても、

1st // #1

3rd // #3

2nd // #2

コンソールでは、上記の結果値が撮影されていることがわかります.すなわち、0秒でも1秒でも、指定された遅延時間にかかわらず、SetTimeout()は、Web apiによってサポートされる非同期関数であり、技術キューに渡されてコールスタックに直接積み重ねられた他の関数(同期処理方式を有する)よりも遅く呼び出されるため、すぐに実行されない.

非同期処理が必要

AjaxWeb APIなど、サーバから必要なデータを受信するコードを作成しているとします.
これらのコードを非同期処理ではなく同期処理する必要がある場合は、サーバからデータを受信するコードの実行が完了するまで待つ必要があるため、ページ全体のロード時間が非常に遅れる可能性があります.
これらの問題を解決するために、非同期処理には、データの受信など、待機するコードが必要である.

Reference

https://velog.io/@daybreak/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC

https://pro-self-studier.tistory.com/89