学习笔记（12-02）事件循环 - 实战案例 —⭐

实例代码

// 写出输出顺序
async function async1() {
	console.log('1')
}

async function async2() {
	console.log('2')
	async1().then(() => {
		console.log('3')
	})
}

console.log('4')
setTimeout(function() {
	console.log('5')
}, 0)

new Promise(function(resolve) {
	console.log('6')
	resolve();
}).then(function() {
	console.log('7')
})

async2();
console.log('8')
setTimeout(function() {
	console.log('9')
}, 0)

1、执行同步代码

// 1. 先定义async1、async2 函数（函数定义不执行内部代码）
// 2. 执行 console.log('4') → 输出 4
console.log('4')

// 3. setTimeout（宏任务，加入宏任务队列，暂不执行）
setTimeout(function(){ console.log('5') },0)

// 4. 执行new Promise（Promise 构造函数是同步的）
new Promise(function(resolve){
  console.log('6') // → 输出 6
  resolve(); // 标记Promise 成功，将.then 回调加入微任务队列
}).then(function(){ console.log('7') }) // 微任务1：待执行

// 5. 执行async2() 函数调用
async2(); 
// async2 内部同步代码：console.log('2') → 输出 2
// 调用async1()，async1 内部同步代码：console.log('1') → 输出 1
// async1() 返回 Promise（状态 resolved），其 .then 回调加入微任务队列
// 微任务2：console.log('3') 待执行

// 6. 执行console.log('8') → 输出 8
console.log('8')

// 7. 执行第二个 setTimeout（宏任务，加入宏任务队列）
setTimeout(function(){ console.log('9') },0)

此时同步代码执行完，控制台已输出：4→ 6→ 2→ 1→ 8。

2、执行微任务

微任务队列顺序：

1. 第一个 Promise 的 .then() → 输出 7
2. async1 () 的 .then() → 输出 3

微任务执行完，控制台追加输出：7→ 3。

3、执行宏任务

宏任务队列顺序（按加入顺序）：

1. 第一个 setTimeout → 输出 5
2. 第二个 setTimeout → 输出 9

结果

控制台输出顺序：4→ 6→ 2 → 1→ 8 ，7→ 3， → 5→ 9。