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

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

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

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

相关推荐
被制作时长两年半的个人练习生25 分钟前
近期的笔试和面试的复盘
算法·面试·职场和发展·算子
Bacon42 分钟前
前端:从0-1实现一个脚手架
前端
Bacon44 分钟前
前端项目部署实战 nginx+docker持续集成
前端
beckyye1 小时前
阿里云智能语音简单使用:语音识别
前端·语音识别·录音
东东2331 小时前
前端规范工具之husky与lint-staged
前端·javascript·eslint
jump6801 小时前
手写事件总线、事件总线可能带来的内存泄露问题
前端
爱吃KFC的大肥羊1 小时前
第二次面试:C++qt开发实习生
面试·职场和发展
GL-Yang1 小时前
2025年-集合类面试题
java·面试
岁月宁静1 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
执沐1 小时前
基于HTML 使用星辰拼出爱心,并附带闪烁+流星+点击生成流星
前端·html