js的事件循環(huán)

javascript是一個單線程語言,javascript分為同步機(jī)制及異步機(jī)制,其中同步機(jī)制是放在棧中,而異步機(jī)制是放在隊(duì)列中,等到棧中的任務(wù)執(zhí)行完后在去執(zhí)行隊(duì)列里面的任務(wù)。
javascript有一個main thread(主線程)和call-stack(調(diào)用棧),當(dāng)在是call-stack中的任務(wù)時,遇到類似于settimeout這種異步的api后,會交由瀏覽器其它模塊處理,然后異步時間到后,把異步需要處理的task放到隊(duì)列中,當(dāng)調(diào)用棧中的任務(wù)執(zhí)行完后在去執(zhí)行隊(duì)列里面的task
舉個例子

  console.log('1')
  setTimeout(()=>{
    console.log('2')
  })
  setTimeout(()=>{
    console.log('3')
  })
  console.log('4')

根據(jù)執(zhí)行上下文開始進(jìn)入到調(diào)用棧,首先遇到console.log('1'),然后在調(diào)用棧中執(zhí)行改代碼

image.png

當(dāng)執(zhí)行遇到setTimeout時,由于是異步函數(shù),會把該異步task交由timer模塊處理,當(dāng)timer模塊處理完后,把對應(yīng)的函數(shù)放到task queue中等待
image.png

注意:call-stack把異步任務(wù)交由timer模塊后立馬執(zhí)行新的上下文代碼
image.png

image.png

當(dāng)call-stack中的任務(wù)執(zhí)行完成后,然后就去執(zhí)行task queue里面的任務(wù)
所以頁面最終的輸出順序?yàn)?p>

console.log('1')
console.log('4')
console.log('2')
console.log('3')
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容