非同步(JavaScript)
2022-04-09 JS の非同期処理を理解するために必要だった知識と学習ロードマップ
2020-04-11 無痛理解 JS | 非同步怎麼運作？ | by Mindy | Medium
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
2021-09-25 JavaScript の非同期処理をじっくり理解する (1) 実行モデルとタスクキュー
3. 瀏覽器提供的Web APIs專門處理stack中的非同步工作
例如setTimeout或與API索取資料
非同步處理方式：
Web APIs會將任務移動到task queue，繼續執行下個工作
當call stack裡的工作都執行完畢，才處理task queue裡的工作
event loop
監看call stack是否已經全部完成
若是，則丟task queue的工作進去
2019-09-28 JS 原力覺醒 — Event Queue & Event Loop 、Event Table
透過程式範例，熟悉 JS 執行流程的關鍵：Event Loop
2017-08-24 理解 JavaScript 中的事件循環、堆疊、佇列和併發模式（Learn event loop, stack, queue, and concurrency mode of JavaScript in depth）
優先度：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製作的可視化網站
關聯項目
Callback
Promise
async
async/await
RxJS