js事件循环看例子就能懂

JS中的事件循环

JS是单线程执行的，而基于事件循环模型，形成了基本没有阻塞（除了alert或同步XHR等 *** 作）的状态

每一个线程都拥有

至少一个任务队列 （宏任务）各个任务队列存放不同来源的任务，浏览器可根据需要进行优先级排序以及一个微任务队列：主要用于处理一些状态的改变，UI渲染工作之前的一些必要 *** 作

事件循环中每一次循环称为一个 tick

事件循环机制：

从宏任务队列中取出一个宏任务执行，执行过程中继续将遇到的任务分类放入宏任务、微任务队列

当该宏任务执行完毕之后，清空微任务队列（执行）

继续下一个宏任务，依次循环

常见的宏任务有：

run

console.log('script start')

setTimeout(function() {
  Promise.resolve().then(() => {
    console.log('then2')
  })
  console.log('timeout1')
}, 10)

new Promise(resolve => {
  console.log('promise1')
  resolve()
  setTimeout(() => console.log('timeout2'), 10)
}).then(function() {
  console.log('then1')
})

console.log('script end')

// script start
// promise1
// script end
// then1
// timeout1
// then2
// timeout2

执行过程分析 首先 script (整体代码) 是一个宏任务 直接输出 script start遇到 setTimeout ，将回调函数放入宏任务队列遇到 Promise, 直接输出 promise1遇到 resolve, 将 promise 的 then 回调放入微任务队列遇到 setTimeout，将回调放入宏任务队列直接输出script end当前宏任务 tick 结束 此时宏任务队列： [ 第一个setTimeout, 第二个setTimeout ] 微任务队列：[new Promise的回调] 清空微任务队列: 输出 then1执行宏任务队列，第一个setTimeout遇到 Promise，将回调放入微任务队列直接输出 timeout1当前宏任务 tick 结束 此时宏任务队列： [ 第二个setTimeout ] 微任务队列：[promise.resolve 的回调]

清空微任务队列: 输出 then2

当前宏任务 tick 结束

执行最后一个宏任务 第二个 setTimeout

输出 timeout2