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

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

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

宏任务有: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-...

相关推荐
没有bug.的程序员5 小时前
JAVA面试宝典 - 《MyBatis 进阶:插件开发与二级缓存》
java·面试·mybatis
工业甲酰苯胺5 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang5 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止6 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms6 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登6 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in6 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4168 小时前
HTML面试题
前端·html
张可8 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
顾林海8 小时前
Android 性能优化:启动优化全解析
android·java·面试·性能优化·zygote