什么是EventLoop？
理解概念之前，咱们先来两个"栗子"吃~
栗子一：
console.log("我是")
setTimeout(function() {
console.log("姐姐")
}, 0)
console.log("超凡的")
// 输出答案 “我是超凡的姐姐”
栗子二：
console.log("我是")
setTimeout(function() {
console.log("姐姐(天津味儿的)")
}, 0)
new Promise(()=>{
console.log("特别的")
}).then("哈哈哈")
console.log("超凡的")
//输出答案 "我是特别的超凡的哈哈哈哈姐姐(天津味儿的)"
那各位猜对/猜错的小伙伴，其实以上JS代码能够在浏览器中有效执行的过程，就是浏览器的EventLoop
总结：EvenLoop即事件循环，也就是浏览器或Node的一种能够javaScript单线程运行时不会阻塞的一种机制/运行机制
那么问题来了，为何会如何输出？那就要说到宏任务&微任务
首先说一下宏任务和微任务的执行内容和范围
宏任务：主线程要执行的代码 & 定时器/延时器
微任务：Promise的.then .catch中需要执行的内容
每一个宏任务都是独立的个体，上一个宏任务执行完，才会考虑下一个宏任务。第一个宏任务队列里的内容执行完毕时，会进行判断看是否有微任务，如果满足条件的微任务，执行完所有的微任务，才会执行下一个宏任务。
img1.png
EventLoop事件循环队列
- Js是单线程的，Js执行时，主线程遇到了异步函数不会停留，放入执行队列
- 满足条件后，将执行队列的内容，放入任务队列中排队
- 主线程执行完毕代码空闲后，才会考虑任务队列中的代码
img2.png
题目一：无微任务
console.log("我是小姐姐,") //宏任务1
setTimeout(function(){
console.log("你是谁？") // 宏任务2（属于下一个宏任务,定时器/延时器属于异步内容，放入执行栈后，并放入任务队列等待执行)
})
console.log("我们认识一下,") //宏任务1
//执行顺序 执行宏任务1内容完毕后，没有满足条件的微任务，直接执行下一个宏任务2
//输出结果 我是小姐姐,我们认识一下,你是谁？
题目二：有微任务
说明补充1：promise的内部既包含宏任务也包含微任务，promise内部执行为宏任务，Promise的.then .catch中需要执行的内容执行为微任务
console.log("我是") //宏任务1
setTimeout(function() {
console.log("姐姐(天津味儿的)") //宏任务2 (这里就不多说了.....)
}, 0)
new Promise(()=>{
console.log("特别的") //宏任务1 (看下方的补充1)
}).then("哈哈哈") // 满足条件的微任务，宏任务1执行完毕后，执行微任务，微任务执行完毕后执行宏任务2
console.log("超凡的") // 宏任务1
//输出答案 "我是特别的超凡的哈哈哈哈姐姐(天津味儿的)"
题目三：什么都有
说明补充2：async表示函数是异步的的，async只有遇到了await开始，才是异步的开始。
async function fn(){
console.log('111')
}
console.log('222')
//没有await，代码正常输出 111222
说明补充3：await后的内容为宏任务，await下的内容可以理解为.then后面的内容，相当于微任务
async function fn(){
console.log("111") //宏任务1
const res = await fn2()// 宏任务1 fn2() await后的内容为宏任务
console.log(res) //微任务1 await下的内容可以理解为.then后面的内容，相当于微任务
}
function fn2(){
console.log('222') //宏任务1
return 3 //宏任务1
}
fn()//宏任务1
//输出结果为 111 222 3
小霸王来了(我们按照以上内容自己分析)
console.log('script start')
async function async1() {
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2 end')
}
async1()
setTimeout(function() {
console.log('setTimeout')
}, 0)
new Promise(resolve => {
console.log('Promise')
resolve()
})
.then(function() {
console.log('promise1')
})
.then(function() {
console.log('promise2')
})
console.log('script end')
分析如下：
console.log('script start') //宏任务1
async function async1() {
await async2() // 宏任务1 async2() **await后的内容为宏任务，await下的内容为异步任务**
console.log('async1 end') //微任务1
}
async function async2() {
console.log('async2 end') //宏任务1
}
async1() // 宏任务1
setTimeout(function() {
console.log('setTimeout') //宏任务2
}, 0)
new Promise(resolve => {
console.log('Promise') //宏任务1
resolve() //宏任务1
})
.then(function() {
console.log('promise1') //微任务2
})
.then(function() {
console.log('promise2') //微任务3
})
console.log('script end') //宏任务1
输出顺序为宏任务1： script start async2 end Promise script end
微任务依次执行：async1 end promise1 promise2
下一个宏任务： setTimeout
看完题目二、题目三的两个补充条件后，面试后大部分的宏任务和微任务练习题基本不会出错，也可以多看一些文章，加深理解，一起加油，欢迎互动和补充~
网友评论