非同步(JavaScript)
JavaScript是單執行緒的程式語言
single-threaded
以由上至下的順序執行
一次只能處理一件事
非常概略性地來說，大致分有：
1. call stack存放執行中的工作
2. task queue存放等待中的非同步工作
又稱callback queue
再分為
micro task queue／job queue
處理優先度較高的queue
例如Promise callback
macro task queue／event queue
處理如setTimeout
3. 瀏覽器提供的Web APIs專門處理stack中的非同步工作
例如setTimeout或與API索取資料
非同步處理方式：
Web APIs會將任務移動到task queue，繼續執行下個工作
當call stack裡的工作都執行完畢，才處理task queue裡的工作
event loop
監看call stack是否已經全部完成
若是，則丟task queue的工作進去
JS 原力覺醒 — Event Queue & Event Loop 、Event Table
透過程式範例，熟悉 JS 執行流程的關鍵：Event Loop
優先度：call stack > micro task queue > macro task queue
https://www.youtube.com/watch?v=8aGhZQkoFbQ
Phillip Robert在JSConf上的解說
流程圖
code:mermaid
flowchart TD
subgraph CallStack
CST0非同步工作-.->CST1
CST1同步工作-.->CST2
CST2同步工作
end
subgraph WebAPIs
WA0setTimeout
WA1AJAX
WA2Events
end
subgraph TaskQueue
TQT0非同步工作
TQT1非同步工作-.->TQT0
TQT2非同步工作-.->TQT1
end
CallStack--處理非同步工作-->WebAPIs
WebAPIs--把非同步工作丟到 Task Queue 去-->TaskQueue
TQT0 --等待 Call Stack 工作全部結束後才丟上去--> CallStack
工具
JS Visualizer 9000
Andrew Dillon製作的可視化網站
關聯項目
async
Callback
Promise
async/await
RxJS
2022-04-09 JS の非同期処理を理解するために必要だった知識と学習ロードマップ
2019-10-05 JavaScript 中的同步與非同步（上）：先成為 callback 大師吧！
2020-04-11 無痛理解 JS | 非同步怎麼運作？. 總以為世界的形狀我們早已熟悉，但到頭來卻發現並不是。 筆者每每在寫… | by Mindy | Medium
2017-08-24 理解 JavaScript 中的事件循環、堆疊、佇列和併發模式（Learn event loop, stack, queue, and concurrency mode of JavaScript in depth）
2021-09-25 JavaScript の非同期処理をじっくり理解する (1) 実行モデルとタスクキュー
V8
2022-05-08 V8 エンジンによる内部変換コードで async/await の挙動を理解する