JS異步宏隊(duì)列微隊(duì)列原理詳解
先看一張我繪制的原理圖
原理圖
setImmediate 也是宏任務(wù),在 Node 環(huán)境下,微任務(wù)還有 process.nextTick
JS 中用來存儲(chǔ)待執(zhí)行回調(diào)函數(shù)的隊(duì)列包含 2 個(gè)不同特定的列隊(duì)
- 宏列隊(duì):用來保存待執(zhí)行的宏任務(wù)(回調(diào)),比如:定時(shí)器回調(diào)、DOM 事件回調(diào)、ajax 回調(diào)微
- 列隊(duì):用來保存待執(zhí)行的微任務(wù)(回調(diào)),比如:promise的回調(diào)、MutationObserver 的回調(diào)
JS 執(zhí)行時(shí)會(huì)區(qū)別這 2 個(gè)隊(duì)列
- JS 引擎首先必須先執(zhí)行所有的初始化同步任務(wù)代碼
- 每次準(zhǔn)備取出第一個(gè)宏任務(wù)執(zhí)行前, 都要將所有的微任務(wù)一個(gè)一個(gè)取出來執(zhí)行,也就是優(yōu)先級(jí)比宏任務(wù)高,且與微任務(wù)所處的代碼位置無關(guān)
下面這個(gè)例子可以看出 Promise 要先于 setTimeout 執(zhí)行
setTimeout(() => { // 立即放入宏隊(duì)列 console.log('settimeout callback1()'); }, 0); setTimeout(() => { // 立即放入宏隊(duì)列 console.log('settimeout callback2()'); }, 0); Promise.resolve(1).then(value => { // 立即放入微隊(duì)列 console.log('Promise onResolved1()', value); }) Promise.resolve(2).then(value => { // 立即放入微隊(duì)列 console.log('Promise onResolved2()', value); }) // Promise onResolved1() 1 // Promise onResolved2() 2 // settimeout callback1() // settimeout callback2()
全文完。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS異步宏隊(duì)列與微隊(duì)列原理區(qū)別詳解
- 淺談Vuejs中nextTick()異步更新隊(duì)列源碼解析
- JS異步函數(shù)隊(duì)列功能實(shí)例分析
- JavaScript隊(duì)列函數(shù)和異步執(zhí)行詳解
- JavaScript 異步方法隊(duì)列鏈實(shí)現(xiàn)代碼分析
- JavaScript錯(cuò)誤處理try..catch...finally+涵蓋throw+TypeError+RangeError
- 聊聊Javascript中try catch的2個(gè)作用
- 一分鐘學(xué)會(huì)JavaScript中的try-catch
- 實(shí)例解析js中try、catch、finally的執(zhí)行規(guī)則
- JavaScript異步隊(duì)列進(jìn)行try?catch時(shí)的問題解決
相關(guān)文章
用最通俗易懂的代碼幫助新手理解javascript閉包 推薦
我同樣也是個(gè)javascript新手,怎么說呢,先學(xué)的jquery,精通之后發(fā)現(xiàn)了javascript的重要性,再回過頭來學(xué)javascript面向?qū)ο缶幊?/div> 2012-03-03JS實(shí)現(xiàn)雙擊編輯可修改狀態(tài)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)雙擊編輯可修改狀態(tài)的方法,涉及javascript針對(duì)頁(yè)面元素的動(dòng)態(tài)創(chuàng)建及設(shè)置技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08JavaScript之生成器_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
generator(生成器)是ES6標(biāo)準(zhǔn)引入的新的數(shù)據(jù)類型。一個(gè)generator看上去像一個(gè)函數(shù),但可以返回多次,有興趣的可以了解一下。2017-06-06javascript動(dòng)態(tài)創(chuàng)建鏈接的方法
這篇文章主要介紹了javascript動(dòng)態(tài)創(chuàng)建鏈接的方法,涉及javascript動(dòng)態(tài)操作頁(yè)面元素的技巧,需要的朋友可以參考下2015-05-05JavaScript的內(nèi)置對(duì)象Date詳解
這篇文章主要為大家介紹了vue組件通信的幾種方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-11-11JS監(jiān)聽和響應(yīng)DOM元素的變化的方法
在前端開發(fā)中,處理動(dòng)態(tài)變化的 DOM(文檔對(duì)象模型)很是常見的需求,比如自動(dòng)化測(cè)試中,可能需要監(jiān)控 DOM 變化來驗(yàn)證測(cè)試條件,在用戶填寫表單時(shí),某些字段需要即時(shí)驗(yàn)證等,所以本文給大家介紹了JS監(jiān)聽和響應(yīng)DOM元素的變化的方法,需要的朋友可以參考下2024-09-09預(yù)防網(wǎng)頁(yè)掛馬的方法總結(jié)
這篇文章主要介紹了預(yù)防網(wǎng)頁(yè)掛馬的方法總結(jié)的相關(guān)資料,這里詳細(xì)整理了具體方法,和如何實(shí)現(xiàn),需要的朋友可以參考下2016-11-11smartupload實(shí)現(xiàn)文件上傳時(shí)獲取表單數(shù)據(jù)(推薦)
這篇文章主要介紹了smartupload實(shí)現(xiàn)文件上傳時(shí)獲取表單數(shù)據(jù)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12最新評(píng)論