看明白两个案例,秒懂事件循环

事件循环的任务队列包括宏任务微任务

执行顺序就是:同步代码 -> 第一轮微任务 -> 第一轮宏任务 -> 第二轮微任务 ->...

宏任务有:setTimeout , setInterval , setImmediate, I/O, UI rendering。

微任务有:process.nextTick , Promise, Object.observe(已废弃), MutationObserver(html5新特性)

两大原则:

  1. setTimeout和setInterval同源,且均优先于setImmediate执行
  2. nextTick队列会比Promie.then方法里面的代码先执行

简单案例

js 复制代码
setTimeout(function() {
    console.log('timeout1'); // 5-第一轮宏任务
})

new Promise(function(resolve) {
    console.log('promise1'); // 1-同步代码
    for(var i = 0; i < 1000; i++) {
        i == 99 && resolve();
    }
    console.log('promise2'); // 2-同步代码
}).then(function() {
    console.log('then1'); // 4-第一轮微任务
})

console.log('global1'); // 3-同步代码


/*
promise1
promise2
global1
then1
timeout1
*/

综合案例

js 复制代码
console.log('golb1'); // 1-同步代码

setTimeout(function() {
    console.log('timeout1'); // 3.1-第一轮宏任务
    process.nextTick(function() {
        console.log('timeout1_nextTick'); // 3.3-第二轮微任务
    })
    new Promise(function(resolve) {
        console.log('timeout1_promise'); // 3.2-第一轮宏任务
        resolve();
    }).then(function() {
        console.log('timeout1_then') // 3.4-第二轮微任务
    })
})

setImmediate(function() {
    console.log('immediate1'); // 3.1-第一轮宏任务
    process.nextTick(function() {
        console.log('immediate1_nextTick'); // 3.3-第二轮微任务
    })
    new Promise(function(resolve) {
        console.log('immediate1_promise'); // 3.2-第一轮宏任务
        resolve();
    }).then(function() {
        console.log('immediate1_then') // 3.4-第二轮微任务
    })
})

process.nextTick(function() {
    console.log('glob1_nextTick');// 2.1-第一轮微任务
})
new Promise(function(resolve) {
    console.log('glob1_promise');// 1-同步代码
    resolve();
}).then(function() {
    console.log('glob1_then') // 2.2-第一轮微任务
})

setTimeout(function() {
    console.log('timeout2'); // 3.1-第一轮宏任务
    process.nextTick(function() {
        console.log('timeout2_nextTick'); // 3.3-第二轮微任务
    })
    new Promise(function(resolve) {
        console.log('timeout2_promise'); // 3.2-第一轮宏任务
        resolve();
    }).then(function() {
        console.log('timeout2_then') // 3.4-第二轮微任务
    })
})

process.nextTick(function() {
    console.log('glob2_nextTick');// 2.1-第一轮微任务
})
new Promise(function(resolve) {
    console.log('glob2_promise');// 1-同步代码
    resolve();
}).then(function() {
    console.log('glob2_then')// 2.2-第一轮微任务
})

setImmediate(function() {
    console.log('immediate2'); // 3.1-第一轮宏任务
    process.nextTick(function() {
        console.log('immediate2_nextTick'); // 3.3-第二轮微任务
    })
    new Promise(function(resolve) {
        console.log('immediate2_promise'); // 3.2-第一轮宏任务
        resolve();
    }).then(function() {
        console.log('immediate2_then') // 3.4-第二轮微任务
    })
})

/*
(1-同步代码)
golb1
glob1_promise
glob2_promise
(2-第一轮微任务)
glob1_nextTick
glob2_nextTick
glob1_then
glob2_then
(3-第一轮宏任务)
(setTimeout)
timeout1
timeout1_promise
timeout1_nextTick
timeout1_then
timeout2
timeout2_promise
timeout2_nextTick
timeout2_then
(setImmediate)
immediate1
immediate1_promise
immediate1_nextTick
immediate1_then
immediate2
immediate2_promise
immediate2_nextTick
immediate2_then
*/

注:在Node 11前,Node的事件循环会与浏览器存在差异,以上面案例中的两个setTimeout为例:

js 复制代码
//在Node 11前
timeout1
timeout1_promise
timeout2
timeout2_promise
timeout1_nextTick
timeout2_nextTick
timeout1_then
timeout2_then
// 在Node11后和浏览器
timeout1
timeout1_promise
timeout1_nextTick
timeout1_then
timeout2
timeout2_promise
timeout2_nextTick
timeout2_then

即在同一类任务分发器(如:多个setTimeout),在Node 11前,会先执行所有的nextTick,再到Promise.then;而在Node11后和浏览器,都是依次执行每个setTimeout,在同一个setTimeout里面先执行所有nextTick,再到Promise.then。

Refs:

mp.weixin.qq.com/s/m3a6vjp8-...

相关推荐
海天胜景3 分钟前
vue3 el-table动态表头
javascript·vue.js·elementui
G_whang8 分钟前
jenkins自动化部署前端vue+docker项目
前端·自动化·jenkins
凌辰揽月2 小时前
AJAX 学习
java·前端·javascript·学习·ajax·okhttp
然我4 小时前
防抖与节流:如何让频繁触发的函数 “慢下来”?
前端·javascript·html
鱼樱前端4 小时前
2025前端人一文看懂 Broadcast Channel API 通信指南
前端·vue.js
烛阴4 小时前
非空断言完全指南:解锁TypeScript/JavaScript的安全导航黑科技
前端·javascript
鱼樱前端4 小时前
2025前端人一文看懂 window.postMessage 通信
前端·vue.js
快乐点吧4 小时前
【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)
前端·笔记
pe7er5 小时前
nuxtjs+git submodule的微前端有没有搞头
前端·设计模式·前端框架
七月的冰红茶5 小时前
【threejs】第一人称视角之八叉树碰撞检测
前端·threejs