Skip to content

事件循环

JS 代码分为两类

  • 同步代码:代码从上到下执行
  • 异步代码:等待异步任务完成,再执行
    • 宏任务:ajax,setTimeout,setInterval,requestAnimationFrame,DOM 事件监听,UI 渲染....
    • 微任务:promies 中的 then 回调 Mutaion Observer ...

JS 代码的执行顺序

  1. 从代码段开始执行,先所有的同步任务执行完毕。
  2. 如果遇到一个宏任务,会把这个任务放到一个宏任务队列,如果遇到一个微任务,就把这个微任务放到微任务任务中。
  3. 当同步代码执行完毕后,先去清空微任务队列。
  4. 当微任务队列清空完毕后,从宏任务队列中取出一个宏任务,去执行,在执行过程中,你的宏任务中可能还有同步代码或宏任务或微任务,重复上面的步骤,执行完一个宏任务,肯定要清空微任务队列。
  5. 上面的这个循环就构成了浏览器的事件环。
javascript
    /**
     * 定时器,整体代码 ,requestAnimationFrame 宏任务
     * promise、$nextTick 微任务
     * new 一个对象是立即执行的
     * promise 中的 then、catch 是异步
     * setTimeout 是异步
     * 当遇到异步请求时先执行微任务中的异步
     * 微任务是跟在"当前"宏任务屁股后面
     * process.nextTick > promise.then > setTimeout > setImmediate
     * resolve 与 reject 只执行一个
     * requestAnimationFrame 和 定时器 顺序不一定
     */

		事件2
    setTimeout(function () {
      console.log(2)
    }, 0) // 导游
    =========================
    事件1
    new Promise(function (resolve) {
      console.log(3) // 散客
      resolve()
      console.log(4) // 散客
      reject("err")
    }).then(function () {
      console.log(5) // 导游里的散客
    })
    console.log(8) // 散客
		=========================
    // 输出 3,4,8,5,2

img

基于 MIT 许可发布