少女的腦內多巴胺
0%

JS - 「同步」與「非同步」

發表於 更新於 分類於 Disqus：
Javascript到底是「同步」還是「非同步」？

「單執行緒」與「多執行緒」

單執行緒指的是一次執行一個指令，不能同時執行多個指令。
反之多執行緒指的便是一次能夠執行多個指令。而 JavaScript 則是屬於一種單執行緒的程式語言。

同步 (Synchrnous)

一次做一件事，依序執行。

非同步 (Asynchrnous)

同時可以做很多事，不需等到上一個事件完成再做下一件。

摁？不是說 JavaScript 是單執行緒，為什麼會有非同步的存在？
事情是這樣的，因為 JavaScript 是透過 瀏覽器 在執行的，如果瀏覽器使用同步執行的話，網頁便會塞車，稱為阻塞 (Blocking)。

瀏覽器何時會使用非同步？

  • setTimeout()：setTimeout 是指過了一段時間再處理要發生的事。等時間到了後，再把事件丟回 JavaScript，告訴它我要執行了。
  • Ajax：Ajax 是向服務器發送請求，試想一下，如果回傳過程很久，網頁什麼事都不能做，那使用者也只能在螢幕前尷尬了。

瀏覽器如何管理同步與非同步？

在 JavaScript 引擎裡可以分為 執行環境 (Execution Context) 和 **事件佇列 (Event Queue)**。
Execution Context 主要負責處理同步事件，Event Queue則是處理非同步事件，在處理事件的優先順序為 Execution Context => Event Queue，而兩者在事件處理完畢後也會跟著離開該環境，瀏覽器便能判斷事件是否結束。

以下範例，模擬出像是非同步的行為：

1
2
3
4
5
6
7
console.log('111111');

setTimeout(() => {
    console.log('222222');
}, 5000);

console.log('333333');

結果如下：

可以瞭解瀏覽器的執行程序為：

  1. 印出 111111
  2. 等 setTimeout 設定的五秒
  3. 印出 333333
  4. 五秒到了，印出 222222