最近瀏覽資料的過程中重新了解了些JavaScript中異步的知識踪旷,對這塊知識有了更多的認(rèn)識曼氛,于是整理下加深自己對于這部分內(nèi)容的理解。
樹立認(rèn)知
JavaScript引擎是常駐于內(nèi)存中的令野,這也是為什么JavaScript中對dom進(jìn)行事件綁定可以生效的原因舀患,當(dāng)dom節(jié)點(diǎn)遇到觸發(fā)事件的條件,引擎會自動找尋回調(diào)函數(shù)代碼去執(zhí)行气破,并且引擎還會設(shè)定指定時(shí)間去執(zhí)行代碼聊浅,類似set time out函數(shù)這種功能代碼。
宏觀任務(wù)與微觀任務(wù)
es5之后js中引入了promise的概念现使,這讓js引擎也可以發(fā)起任務(wù)低匙,我門將宿主環(huán)境發(fā)起的任務(wù)稱為宏觀任務(wù),將js引擎發(fā)起的任務(wù)稱為微觀任務(wù)(promise發(fā)起的)碳锈,這里提一句set time out發(fā)起的是宏觀任務(wù)顽冶,他是宿主引擎中的API。
這里要注意的一點(diǎn)是每個(gè)宏觀任務(wù)一定會保證在這個(gè)宏觀任務(wù)中發(fā)起的微觀任務(wù)完成才會執(zhí)行其他宏觀任務(wù)
實(shí)例
下邊來個(gè)實(shí)例來具體分析看看js中異步執(zhí)行的規(guī)律售碳。
setTimeout(()=> console.log('a'),0);
var r1= new Promise((resolve,reject)=> {
resolve()
}).then(()=>{
var begin = Date.now();
while(Date.now()-begin<1000){
}
console.log('c1');
new Promise((resolve,reject)=>{
resolve()
}).then(()=>{
console.log('c2')
})
})
// c1
// c2
// a
上邊例子中强重,宏觀任務(wù)中執(zhí)行了一個(gè)setTimeout佩迟、執(zhí)行了一個(gè)promise(發(fā)起了一個(gè)微觀任務(wù)),在微觀任務(wù)中延遲了一秒后又建立了一個(gè)promise(又一次發(fā)起了一個(gè)微觀任務(wù))竿屹。
根據(jù)先宏觀任務(wù)后微觀任務(wù)的規(guī)則报强,就可以很容易的明白最終的打印結(jié)果。
分析異步執(zhí)行順序
確定多少宏觀任務(wù)
確定每個(gè)宏觀任務(wù)中有多少微觀任務(wù)
確定每個(gè)宏觀任務(wù)中微觀任務(wù)執(zhí)行順序
確定每個(gè)宏觀任務(wù)執(zhí)行順序
確定整個(gè)執(zhí)行順序