JS的特點之一，就是他是單執行緒語言，也就是它一次只做一件事

不像多執行緒的 python

那為什麼它還可以同時處理很多事情（像是點擊、API 請求、setTimeout）？這就要靠非同步機制和事件循環（Event Loop）

什麼是同步與非同步？

• 同步（Synchronous）：
  • 一次只做一件事，不會有兩個任務同時進行
  • 一般compilier執行的方式，一行接著一行執行
  • 優點：簡單、直觀、程式碼從上到下執行，易於編寫和除錯
• 非同步（Asynchronous）：
  • 每個任務各做各的，不用等其他任務完成，再進行下一個任務

舉大家熟知經典的setTimeout例子：

console.log("A");
setTimeout(() => {
  console.log("B");
}, 1000);
console.log("C");

結果會印出

A
C
B

我們先來認識執行時的幾個核心名詞概念：

Call Stack（呼叫堆疊）

• JavaScript 執行程式的地方
• Stack 是一個 LIFO（後進先出）結構，用來追蹤目前執行到哪個函式
• 每次呼叫一個函式，它會被放到 Stack 上；函式執行結束，就從 Stack 移除

舉例來說：

function sayHi() {
  console.log("Hi");
}

function greet() {
  sayHi();
}

greet();

它會像這樣👇

Web APIs（由瀏覽器提供的）

• setTimeout、DOM Event、fetch 都是由瀏覽器的 Web API 處理，不是 JS 本身的功能

像這樣的setTimeout() ，流程就會是：

setTimeout(() => {
  console.log("Timeout finished!");
}, 1000);

1. setTimeout 呼叫時，會交給 Web API 處理計時
2. 計時完成後，callback 被送去Callback Queue

Callback Queue（回呼佇列）

• 當非同步任務完成後，它會把對應的 callback 丟到這裡
• 但是不能馬上執行，他要排隊，要等 Call Stack 清空才能一個一個送進去執行

Event Loop（事件循環）

• 它是一個監視器的身分，它會一直檢查看 Call Stack 有沒有空
• 如果空了，就把 Callback Queue 裡的任務丟到Call Stack 執行

正個執行流程就會長這樣

執行流程

參考資料

https://medium.com/@bun.coding/javascript學習筆記-call-stack-呼叫堆疊-d163c05d1035

https://ithelp.ithome.com.tw/articles/10200054