瀏覽器 的 EventLoop 動態圖析

摘要： ① Javascript 核心載入程式碼到 執行棧 ② 執行棧 依次執行主執行緒的 同步任務 ，過程中若遇呼叫了非同步Api則會添加回調事件到 回撥佇列 中。且 微任務 事件新增到微任務佇列中， 巨集任務 事件新增到巨集任務佇列中去。直到當前 執行棧 中程式...

....特點是

• 微任務佇列操作，總是會一次性清空佇列
• 巨集任務佇列每次只會取出一條任務到執行棧中執行

輔助理解

let promiseGlobal = new Promise(resolve=>{
console.log(1)
resolve('2')
})
console.log(3) 

promiseGlobal.then(data=>{
console.log(data)
let setTimeoutInner = setTimeout(_=>{
console.log(4)
},1000)
let promiseInner =new Promise(resolve=>{
console.log(5) 
resolve(6)
}).then(data=>{
console.log(data)
})
})
let setTimeoutGlobal = setTimeout(_=>{
console.log(7);
 let promiseInGlobalTimeout = new Promise(resolve=>{
console.log(8); 
resolve(9)
}).then(data=>{
console.log(data)
})
},1000) 
複製程式碼

建議不要直接拷貝到 控制檯跑...大家先想想:smirk:

過程動畫

答案

1 3 2 4 5 6 __ 等待一秒___ 7 8 9 4