实例理解promise、macro-task、micro-task

最新推荐文章于 2025-02-06 10:58:06 发布

Joy__Yue

最新推荐文章于 2025-02-06 10:58:06 发布

阅读量524

点赞数

分类专栏： JS专场

本文链接：https://blog.youkuaiyun.com/wy6250000/article/details/83385066

版权

JS专场专栏收录该内容

18 篇文章

订阅专栏

本文介绍了JavaScript中事件执行的两种任务类型——宏任务（macro-task）和微任务（micro-task）。宏任务包括script、setTimeout等，而微任务包括Promise、MutationObserver等。执行顺序为：首先执行script，遇到宏任务和微任务分别加入队列，待函数调用栈执行完毕后先执行微任务队列，然后执行宏任务队列。这一过程不断循环，形成事件循环（event loop）。需要注意的是，Promise的.then()方法的回调优先级高于setTimeout。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setTimeout(function(){
	console.log(1);
}, 0);
new Promise(function executor(resolve){
	console.log(2);
	for(var i=0; i<10000; i++){
		i == 999 && resolve();
	}
	console.log(3);
}).then(function(){
	console.log(4);
});
console.log(5);

先看结果：
在这里插入图片描述
js中事件执行主要分为两种任务类型：macro-task（task）（宏任务）、micro-task（Job queue）（微任务）；

什么会加入到task，什么会加入到micro-task？
task：script（全局任务），setTimeout，setInterval，setImmediate ，I/O，UI渲染等；
micro-task： promise，Object，observe，process.nextTick，MutationObserver等；（通俗来说是执行定时器、事件、ajax事件等操作时）；

那么执行顺序是什么样的：
script先进入函数调用栈，继续执行
–>遇到宏任务时把宏任务加入宏任务执行队列（但暂不执行），遇到微任务把微任务加入微任务执行队列（但暂不执行），等到函数调用栈所有内容出栈后
–>去执行微任务队列
–>然后再回头执行宏任务队列
–>再进入函数调用栈，执行微任务队列，再执行宏任务队列，直到宏任务队列执行完毕

注意：
1、undefined是console.log(5);打印时输出的（因为控制台运行代码，会返回最后一句代码的返回值，即consol.log()的返回值，即undefined）
2、每一个事件循环（event loop）都有一个microtasks
3、new的对象立即执行，promise构造函数传入的函数会在本次new 操作立刻执行
4、.then和setTimeout都是异步操作，但优先级不一样，then()优先级更高些，所以4比1先输出

综合以上，上述代码执行过程如下：

// 加入宏任务队列，第五输出1
setTimeout(function(){
	console.log(1);
}, 0);
// new立即执行而且是promise（加入微任务队列）
new Promise(function executor(resolve){
	// 第一，输出2
	console.log(2);
	for(var i=0; i<10000; i++){
		i == 999 && resolve();
	}
	//第二， 输出3
	console.log(3);
}).then(function(){        // promise中的then操作是放在执行栈，也就是主线程的最后，暂存，继续往下走
	// 第四，输出4
	console.log(4);
});
// 第三，输出5
console.log(5);