事件循环（Event Loop）

文章目录

• 系列文章目录
• 前言
• 一、同步任务
• 二、异步任务
  • 1.宏任务与微任务
  • 2.案例
• 总结

---

前言

正因为JS是单线程的，所以如果出现多个任务，这些任务的执行顺序是怎么样的呢？这就不得不提一下事件循环

一、同步任务

js中的同步任务是按顺序从上往下依次执行的

   

 这里的1234是依次执行

二、异步任务

当异步任务出现的时候，会先将异步任务存放在任务队列中，当执行完所有的同步任务之后，再去调用任务队列中的异步任务

 js会先将同步任务1提至主线程，然后发现异步任务1和2，则将异步任务1和2依次放入任务队列

同步任务执行完以后会去任务对列看看有没有异步任务 然后执行异步

先执行同步任务1->  再执行同步任务2 ->异步任务

2.微任务与宏任务

异步任务又可以详细的分为两类 就是微任务与宏任务 

I/O、定时器、事件绑定、ajax等都是宏任务

Promise的then、catch、finally和process的nextTick都是微任务

宏任务与微任务的执行顺序是  宏任务执行一个后先看看任务对列有没有微任务 如果有就把微任务执行完再去执行下一个宏任务

---

 举个栗子

console.log(1) // 同步任务
setTimeout(function() {
  console.log(2) // 异步任务：宏任务
}, 0)
new Promise(function(resolve) {
  console.log(3) // 同步任务
  resolve()
}).then(function() {
  console.log(4) // 异步任务：微任务
})
console.log(5) // 同步任务

答案：1、3、5、4、2

总结

同步任务-->微任务--->宏任务--->微任务