面试过程中遇到了该问题回答的不是太完整,看到大神的解析感觉很好理解故记录一下。
同步 && 异步
什么是异步,什么是同步,我不多说,我就通过小故事来讲讲吧。
同步
:你打电话去书店订书,老板说我查查,你不挂电话在等待,老板把查到的结果告诉你,这期间你不能做自己的事情异步
:你打电话去书店订书,老板说我查查,回头告诉你,你把电话挂了,先去做自己的事情
JS执行机制
- 1、遇到
同步代码
直接执行 - 2、遇到
异步代码
先放一边,并且将他回调函数
存起来,存的地方叫事件队列
- 3、等所有
同步代码
都执行完,再从事件队列
中把存起来的所有异步回调函数
拿出来按顺序执行
console.log(1) // 同步
setTimeout(() => {
console.log(2) // 异步
}, 2000);
console.log(3) // 同步
setTimeout(() => {
console.log(4) // 异步
}, 0);
console.log(5) // 同步
输出 : 1 3 5 4 2
宏任务 && 微任务
前面说了,等所有同步代码都执行完,再从事件队列
里依次执行所有异步回调函数
。
其实事件队列
也是一个小团体,人家也有自己的规则,这就类似于学校管理着许多社团,人家自己社团内部也有人家自己的规矩。
话说回来,为什么事件队列
里需要有自己的规则呢?要不你先想想为什么学校里的社团里要有自己的规则要分等级,是因为有的人能力强有的人能力弱,所以也就有了等级的高低。其实事件队列
也一样,事件队列
是用来存异步回调的,但是异步也分类型啊,异步任务分为宏任务
和微任务
,并且微任务执行时机先于宏任务
那宏任务和微任务都分别有哪些呢?
宏任务
# | 浏览器 | Node |
---|---|---|
I/O | ✅ | ✅ |
setTimeout | ✅ | ✅ |
setInterval | ✅ | ✅ |
setImmediate | ❌ | ✅ |
requestAnimationFrame | ✅ | ❌ |
微任务
# | 浏览器 | Node |
---|---|---|
Promise.prototype.then catch finally | ✅ | ✅ |
process.nextTick | ❌ | ✅ |
MutationObserver | ✅ | ❌ |
即执行顺序:
同步 ==> 异步 ==> 微任务 ==>宏任务
console.log(1) // 同步
setTimeout(() => {
console.log(2) // 异步:宏任务
});
console.log(3) // 同步
Promise.resolve().then(()=>{ // 异步:微任务
console.log(4)
})
console.log(5) // 同步
//输出 1 3 5 4 2
console.log(1) // 同步
setTimeout(() => {
console.log(2) // 异步:宏任务 setTimeout1
Promise.resolve().then(() => { // 异步:微任务 then1
console.log(3)
})
});
console.log(4) // 同步
new Promise((resolve,reject) => {
console.log(5) // 同步
resolve()
}).then(() => { // 异步:微任务 then2
console.log(6)
setTimeout(() => {
console.log(7) // 异步:宏任务 setTimeout2
})
})
console.log(8) // 同步
//注意:Promise的executor是同步的哦!!!
//输出 1 4 5 8 6 2 3 7
本文转载于:掘金https://juejin.cn/post/7016298598883131423