了解非同步 & 同步、call back queue、call stack、web api

首先我們要先了解非同步 & 同步!

我們先講同步:

同步的意思是說，我們正常的程式碼都是一行一行做，如果前一行的程式碼沒有做完，下一行就不能做，說白一點就是一件事情沒做完，下一件事情就不能做。

範例：

function step1() {
  console.log("第一步")
}

function step2() {
  console.log("第二步")
}

function step3() {
  console.log("第三步")
}

step1()　　//第一步
step2()   //第二步
step3()   //第三步

會必須等上面跑完才會跑下面。

那如果是非同步呢?

非同步就是說白一點，先讓主要程式碼先跑，而次要的程式碼把事情做完之後再回到主要的程式碼進行運作。

範例:

console.log("1")

setTimeout(() => {  //setTimeout是指等一段時間之後，執行一次某個函式
  console.log("2")  //等待1000毫秒(1秒)在印出來'2'。
}, 1000)

console.log("3")

//輸出的時候會先跑出​'1'、'3'、最後才是'2'

那接下來call back queue:
call back queueu又稱Task Queue，叫做[回調隊列]，就是["讓非同步的東西完成後，callback 等著被執行的排隊區"]

如果在說白一點，就是說"他是在非同步完成後，callback 等待被執行的地方，至於什麼時候跑，要看 Call Stack 什麼時候空"。

範例:

console.log("A")

setTimeout(() => {
  console.log("B (timeout)")
}, 0)

console.log("C")

這邊call back queue流程就是:

1. console.log("A") 立刻跑（進 Call Stack → 執行）
2. setTimeout(..., 0) 不是「立刻執行 callback」
   它是：交給瀏覽器的計時器（Web APIs）去計
3. console.log("C") 立刻跑完
4. 這時 Call Stack 清空了
5. 計時器到點後，把 () => console.log("B") 丟進 Callback Queue
6. Event Loop 看到 Call Stack 空了 → 把隊伍最前面的 callback 拿進 Call Stack 執行
   → 到最後 B 才印

call stack:

call stack叫做呼叫堆疊，就是javascript現在正在執行的事情清單。

說白一點，就是現在做這件事情，而這件事情處理完之後再做下一件，除非中途有更緊急的事情要處理，就會先處理更緊急的事情，處理完之後再做後續的工作跟事情。

舉例:

function a() {
  console.log("a")
}

function b() {
  console.log("b")
}

a()
b()

在Call Stack裡就是:

執行a() → a 進 Call Stack → 印出 a → a 出 Stack → 執行 b() → b 進 Stack→ 印出 b → b 出 Stack。

然後他也可以被插隊

範例:

function a() {  //先處理 a
  b()   //發現有緊急的 b 要處理
  console.log("a")  //在跑回來
}

function b() {  //就先跑來處理 b 這邊
  console.log("b")  //處理完了
}

a() //輸出 b a

流程就是:

做 a，做到一半發現 b 很緊急要做→ 去做 b 到了 b 做完 → 回來繼續 a

最後web api:

web api是指瀏覽器幫 JavaScript 做「等、聽、跑很慢的事情」的地方。

例如:

計時:

• setTimeout
• setInterval

事件:

• addEventListener（click / input / scroll）

網路:

• fetch
• XMLHttpRequest

其他:

• localStorage
• geolocation
• setImmediate

範例:

console.log("A")  //跑A，印A

setTimeout(() => {  //跑到這邊setTimeout
  console.log("B")  //這邊javascript會先把這段給Web APIs處理，等你1秒
}, 1000)  

console.log("C")  //跑C，印C
	                //Web APIs說：「1秒時間到囉」，跑B，印B
//輸出'A'、'C'、'B'

流程過程就是:

1️ . console.log("A")

→ 直接進 Call Stack → 印 A

2. setTimeout(...)

→ JS 把事情交給 Web APIs

→ Web APIs 開始幫你等 1 秒

3️. console.log("C")

→ Call Stack 繼續跑 → 印 C

4️. 1 秒到了

→ Web APIs 說：「時間到囉」 → 把 callback 放進 Callback Queue

5️. Call Stack 空了

→ Event Loop 把 callback 丟回 Call Stack → 印 B