持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
事件循环Event Loop又叫事件队列，两者是一个概念
1.什么是事件循环
事件循环指的是js代码所在运行环境（浏览器、nodejs）编译器的一种解析执行规则。 (事件循环是js编译器的范畴)
说人话： js代码可以理解为是一个人在公司中具体做的事情， 而 事件循环 相当于是公司的一种规章制度。 两者不是一个层面的概念。
2.js代码分为两大类
js代码主要分为两大类： 同步代码、异步代码
同步任务：同步任务不需要进行等待，必须立即看到执行结果，比如console
异步任务：异步任务需要等待一定的时候才能看到结果，比如setTimeout、网络请求......
异步任务，又可以细分为宏任务和微任务
常见的宏任务有事件,网络请求（Ajax）,setTimeout() 定时器 ,
常见的微任务有Promise.then() ,async/await
3.事件循环Event Loop执行机制
1.进入到script标签,就进入到了第一次事件循环. 2.遇到同步代码，立即执行 3.遇到宏任务,放入到宏任务队列里. 4.遇到微任务,放入到微任务队列里. 5.执行完所有同步代码 6.执行微任务代码 7.微任务代码执行完毕，本次队列清空 寻找下一个宏任务，重复步骤1
4.题目练习
最后的最后,,找两个题目练习一下
1.
<script>
console.log(1)
setTimeout(function () {
console.log(2)
new Promise(function (resolve) {
console.log(3)
resolve()
}).then(function () {
console.log(4)
})
})
new Promise(function (resolve) {
console.log(5)
resolve()
}).then(function () {
console.log(6)
})
setTimeout(function () {
console.log(7)
new Promise(function (resolve) {
console.log(8)
resolve()
}).then(function () {
console.log(9)
})
})
console.log(10)
</script>
第一步,,先分出同步任务以及异步宏任务和异步微任务
第二步,同步任务结束,执行异步微任务
第三步,在异步微任务结束之后,开始执行第一个异步宏任务(定时器) 把宏任务再分为同步,异步微任务,异步宏任务,按照流程执行
第四步,只剩最后一个宏任务了,,按照上面的流程继续执行
这个执行顺序是1,5,10,6,2,3,4,7,8,9
2.
<script>
console.log(1)
new Promise((resolve, reject) => {
resolve(2)
}).then(res => {
console.log(res)
})
setTimeout(() => {
console.log(3)
})
console.log(4)
</script>
<script>
console.log(5)
</script>
<script>
new Promise((resolve,reject)=>{
resolve(6)
}).then(res=>{
console.log(res)
})
setTimeout(()=>{
console.log(7)
})
console.log(8)
</script>
<script>
console.log(9)
setTimeout(()=>{
console.log(10)
})
</script>
每个script都是相当于一个宏任务,所以第一步编译器从上往下编译,把4个script都放入异步任务队列,然后来解析第一个script标签
解析完第一个script,,把异步任务的第二个任务script拿出来执行,执行console.log(5)
再解析下一个script,
解析最后一个script,9是同步任务,直接进入执行栈,,10为定时器,,进入异步宏任务队列
最后就是三个定时器依次执行
顺序为1,4,2,5,8,6,9,3,7,10
完成
事件循环是js解析执行规则,,也是必须要掌握的技能
加油,奥利给
