JS異步宏隊列微隊列原理詳解
更新時間：2020年09月09日 09:58:25 作者：蔣先森
這篇文章主要介紹了JS異步宏隊列微隊列原理詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
先看一張我繪制的原理圖
原理圖
setImmediate 也是宏任務(wù)，在 Node 環(huán)境下，微任務(wù)還有 process.nextTick
JS 中用來存儲待執(zhí)行回調(diào)函數(shù)的隊列包含 2 個不同特定的列隊
- 宏列隊：用來保存待執(zhí)行的宏任務(wù)（回調(diào)），比如：定時器回調(diào)、DOM 事件回調(diào)、ajax 回調(diào)微
- 列隊：用來保存待執(zhí)行的微任務(wù)（回調(diào)），比如：promise的回調(diào)、MutationObserver 的回調(diào)
JS 執(zhí)行時會區(qū)別這 2 個隊列
- JS 引擎首先必須先執(zhí)行所有的初始化同步任務(wù)代碼
- 每次準(zhǔn)備取出第一個宏任務(wù)執(zhí)行前, 都要將所有的微任務(wù)一個一個取出來執(zhí)行，也就是優(yōu)先級比宏任務(wù)高，且與微任務(wù)所處的代碼位置無關(guān)
下面這個例子可以看出 Promise 要先于 setTimeout 執(zhí)行
setTimeout(() => { // 立即放入宏隊列
console.log('settimeout callback1()');
}, 0);
setTimeout(() => { // 立即放入宏隊列
console.log('settimeout callback2()');
}, 0);
Promise.resolve(1).then(value => { // 立即放入微隊列
console.log('Promise onResolved1()', value);
})
Promise.resolve(2).then(value => { // 立即放入微隊列
console.log('Promise onResolved2()', value);
})
// Promise onResolved1() 1
// Promise onResolved2() 2
// settimeout callback1()
// settimeout callback2()
全文完。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS異步宏隊列與微隊列原理區(qū)別詳解
- 淺談Vuejs中nextTick()異步更新隊列源碼解析
- JS異步函數(shù)隊列功能實例分析
- JavaScript隊列函數(shù)和異步執(zhí)行詳解
- JavaScript 異步方法隊列鏈實現(xiàn)代碼分析
- JavaScript錯誤處理try..catch...finally+涵蓋throw+TypeError+RangeError
- 聊聊Javascript中try catch的2個作用
- 一分鐘學(xué)會JavaScript中的try-catch
- 實例解析js中try、catch、finally的執(zhí)行規(guī)則
- JavaScript異步隊列進行try?catch時的問題解決
相關(guān)文章
Javascript 個人筆記（沒有整理，很亂）...2007-07-07
在 JavaScript 中使用反斜杠來向文本字符串添加特殊字符，下面通過本篇文章給大家介紹javascript如何傳遞特殊字符，對js傳遞特殊字符相關(guān)內(nèi)容感興趣的朋友一起學(xué)習(xí)吧2015-11-11
這篇文章主要介紹了Nuxt配置Element-UI按需引入方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
在頁面中引入 Pace.js 和您所選擇主題的 CSS 文件，就可以讓你的頁面擁有漂亮的加載進度和 Ajax 導(dǎo)航效果。不需要掛接到任何代碼，自動檢測進展。您可以選擇顏色和多種效果，有簡約，閃光燈，MAC OSX，左側(cè)填充，頂部填充，計數(shù)器和彈跳等等。2015-09-09
用原生JS實現(xiàn)愛奇藝首頁導(dǎo)航欄代碼實例
這篇文章主要介紹了用原生JS實現(xiàn)愛奇藝首頁導(dǎo)航欄代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了二叉樹先序遍歷的非遞歸算法，有需要的朋友可以參考一下2014-01-01
Javascript isArray 數(shù)組類型檢測函數(shù)
在日常開發(fā)中，我們經(jīng)常需要判斷某個對象是否是數(shù)組類型的，在js中檢測對象類型的常見的方法有幾種.2009-10-10
Clipboard.js 無需Flash的JavaScript復(fù)制粘貼庫
這篇文章主要介紹了JavaScript 內(nèi)容復(fù)制(無需flash) Clipboard.js使用方法,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了使用D3.js構(gòu)建實時圖形的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
控制瀏覽器全屏的方法有很多，下面為大家介紹下js是如何做到的2014-02-02