快速搞懂js中的宏任务与微任务

本文深入探讨JavaScript的异步执行机制,解析宏任务与微任务的区别及执行顺序,通过具体代码示例说明Promise如何在异步环境中工作。

众所周知js是单线程,但js是可以执行同步和异步任务的,同步的任务众人皆知是按照顺序去执行的;

而异步任务的执行,是有一个优先级的顺序的,包括了 宏任务(macrotasks)
和 微任务(microtasks)

宏任务:整体代码script setTimeout, setInterval, setImmediate, I/O, UI rendering
微任务: Promises.(then catch finally), process.nextTick, MutationObserver
宏任务和微任务的区别在于在事件循环机制中,执行的机制不同

排在前面的script最先执行,然后再执行同步任务与微任务,接着执行下一个宏任务。
我们在工作常用到的宏任务是 setTimeout
,而微任务是 Promise.then

注意这里是Promise.then,也就是说 new Promise在实例化
的过程中所执行的代码是同步的,而在 then
中注册的回调函数才是异步。
在这里插入图片描述
看下面的代码,面试题里经常见的

setTimeout(() => console.log(1))
new Promise((resolve) => {
resolve()
console.log(2)
}).then(() => {
console.log(3)
})
console.log(4)

首先执行宏任务整体代码script, new Promise在实例化过程中过程中执行的代码是同步的,所以先打印出2,然后是最后一行的4,所有同步任务已经执行完成了,接着执行微任务也就是.then()里的回调函数,所以打印4,最后执行宏函数setTimeout,最后打印出1

所以上面代码块的结果是 2 4 3 1

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值