JavaScript全解析——事件轮询EventLoop

来源：千锋教育

发布人：lxl

时间： 2023-05-15 14:41:04

　　JS 是一门单线程语言 (换句话说: 一个时间内我只能做一件事), 异步操作都是放到事件循环队列中, 等待主执行栈来执行

　　JS 是如何执行的 (执行顺序)

　　●从上往下, 一行一行执行

　　●如果中间的某一行书写有误, 那么程序在运行到这一行会报错并停止向下继续运行

　　●先把所有的同步代码执行完毕, 然后再开始执行异步代码

　　EventLoop 是什么

　　其实就是一种执行方式, 当主线程的任务执行完毕后, 会通过轮询, 轮询事件队列(也有人叫做回调队列)当中的任务的方式去执行任务, 如果事件队列中的任务为空, 会一直轮询, 通过事件轮询推入主线程

　　EventLoop 的规则是什么

　　● 从宏任务开始

　　●每执行完毕一个宏任务, 就会清空一次微任务队列(不管微任务队列有多少任务, 都执行完毕)

　　●然后再次执行一个宏任务

　　●循环往复, 直到所有任务队列全都清空

　　宏任务宇微任务是什么

　　●在 JS 中, 代码分为了两种, 同步和异步

　　●异步任务中也分为了两种, 宏任务与微任务

　　○宏任务: 'script 整体代码, setTimeout, setInterval 等...'

　　○微任务: 'Promise.then(), process.nextTick(NodeJs), MutationObserver(H5新特性)...'

　　案例分析


console.log(1)

setTimeout(() => console.log(2), 0)

Promise.resolve().then(() => console.log(3))

console.log(4)

　　●具体流程

　　1.根据 EventLoop 的规则, 从宏任务开始, 因为 script 就算一个宏任务, 所以此时会先将它内部的所有同步代码执行完毕

　　a. 代码从上往下执行, 在第一行遇到了一个 console.log(1), 属于同步代码, 直接执行 (打印1)

　　b.向下执行中, 遇到一个 setTimeout 推入到宏任务队列

　　c.向下继续执行, 遇到一个 promise.then(), 推入到微任务队列

　　d.最后遇到了一个 console.log(4), 属于同步代码, 直接打印 (打印4)

　　2. 根据 EventLoop 的规则, 此时执行完毕一个宏任务, 那么会清空微任务队列

　　a.微任务队列中只有一个 promise.then, 内部的代码为 console.log(3)

　　b.所以清空完毕微任务队列后, 控制台多了一个打印 3

　　3. 根据 EventLoop 的规则, 此时会继续执行下一个宏任务

　　a.目前宏任务队列中的任务为 setTimeout, 内部的代码为 console.log(2)

　　b.所以执行完当前宏任务后, 控制台多了一个打印 2

　　4. 根据 EventLoop 的规则, 此时会清空微任务队列, 但是此时微任务内没有任何任务

　　5. 根据 EventLoop 的规则, 此时会查看宏任务队列, 但是此时宏任务内也没有任何任务

　　6. 程序到此已全都执行完毕

　　7. 最终的打印结果: '1, 4, 3, 2'

　　如果在宏任务执行过程中又开启了一个微任务如何执行?

　　●代码


console.log(1)

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

new Promise((resolve, reject) => {
  console.log(4)
  resolve(5)
}).then((data) => {
  console.log(data);
  return 6;
}).then((data)=>{
  console.log(data)
})

setTimeout(() => {
  console.log(7);
})

console.log(8);