JS中的宏任务与微任务

最新推荐文章于 2025-06-17 08:13:33 发布

小杰90s

最新推荐文章于 2025-06-17 08:13:33 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：宏任务和微任务 JS执行顺序 JS单线程

本文链接：https://blog.youkuaiyun.com/Andrasen/article/details/121783912

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文详细解析了JavaScript的执行机制，重点介绍了同步任务、异步任务、宏任务和微任务的区别与执行顺序。通过比喻，阐述了宏任务（如setTimeout）和微任务（如Promise）的执行顺序，帮助读者理解JavaScript中事件循环的工作原理。示例代码展示了任务执行的顺序，输出结果为13452，进一步巩固了概念理解。

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

由于JS是单线程的，所以任务的执行需要按照先入后出的规则进行，同时在处理任务的时候也是需要有主次之分的
任务分为同步任务和异步任务，JS会先执行同步任务，异步任务则会进行排队，按照先入先出的规则进行
其中异步任务又可分为宏任务和微任务
宏任务包含：
a.新程序或子程序被直接执行
b.事件的回调函数
c.setTimeout()和setInterval()
微任务包含：
a.Promise .then() .catch() .finally()
b.MutationObserver
c.Object.observe
那么宏任务和微任务执行顺序是怎样的呢？
JS依赖事件循环机制，首先会执行微任务然后再执行宏任务，有个很好的比方，在一个家庭当中，父母一般会让小孩子先吃饱喝足然后才会处理自己的事情，这里小孩子就相当于微任务，父母相当于宏任务，这样就很容易记住了

console.log(1)
setTimeout(() => {
	console.log(2)
}, 0)
console.log(3)
new Promise((resolve, reject) => {
	console.log(4)
})
Promise.resolve().then(() => {
	console.log(5)
})
// 执行结果为 1 3 4 5 2