JavaScript 的事件循环

 // 事件循环中函数执行的顺序 其中包含 async await seTimeout，promise
    // 1.任务队列
    // js分为同步任务和异步任务
    // 同步任务都在主线程上执行，形成一个执行栈
    // 主线程之外，事件触发线程管理者一个任务队列，只要异步有了运行结果，就在任务队列中放置一个事件；
    // 一但执行栈中所有的同步任务完成（此时js引擎空闲），系统就会读取任务队列，将可执行的异步放入执行栈中执行；
    
    // 根据规范，事件循环是根据任务队列来协调的，
    // 宏任务：可以理解每次执行栈代码执行就是一个宏任务

    // 我们知道promise中的then catch是异步操作，所以写在promise构造函数中的代码都是同步的；
    // async/await中:出现在await前面的代码会立即执行，
    // await等待的是一个表达式，这个表达式可以返回一个promise也可以返回其他的值；
    // await执行顺序： await后面的表达式会先执行一遍，然后将await后面的代码放入microtask（微任务中），然后跳出这个async函数，执行后面的代码
    
    //2.运行机制
    //-1执行一个宏任务（栈中没有就从事件队列中获取）
    //-2执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
    //-3宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
    //-4当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
    //-5渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）
    
    //  async function async1() {
  //   console.log('async1 start -2');
  //   await async2();
  //   console.log('async1 end -7');  // 放在微任务2
  //   }

  //   async function async2() {
  //       //async2做出如下更改：
  //       new Promise(function(resolve) {
  //       console.log('promise1 -3');
  //       resolve();
  //   }).then(function() {
  //       console.log('promise2 -6'); // 放在微任务1
  //       });
  //   }

  //   console.log('script start-1');

  //   setTimeout(function() { // 宏任务队列2
  //       console.log('setTimeout -9');
  //   }, 0)

  //   async1();

  //   new Promise(function(resolve) {
  //       console.log('promise3 -4');
  //       resolve();
  //   }).then(function() {
  //       console.log('promise4 -8'); //放在微任务3
  //   });

  //   console.log('script end -5');

  // async function async1() {
  //   console.log('async1 start -2');
  //   await async2();
  //   //更改如下：
  //   setTimeout(function() {
  //       console.log('setTimeout1 -8') // 放在宏任务3
  //   },0)
  // }
  // async function async2() {
  //     //更改如下：
  //   setTimeout(function() {
  //     console.log('setTimeout2 -7') //放在宏任务2
  //   },0)
  // }
  // console.log('script start -1');

  // setTimeout(function() {
  //     console.log('setTimeout3 -6'); // 放在宏任务中1
  // }, 0)

  // async1();

  // new Promise(function(resolve) {
  //     console.log('promise1-3');
  //     resolve();
  // }).then(function() {
  //     console.log('promise2 -5'); // 放在微任务1
  // });
  // console.log('script end -4');

  async function a1 () {
    console.log('a1 start -2')
    await a2()
    console.log('a1 end -7') // 放在微任务2
  }
  async function a2 () {
      console.log('a2 -3')
  }

  console.log('script start -1')

  setTimeout(() => {
      console.log('setTimeout -10') // 放在宏任务1
  }, 0)

  Promise.resolve().then(() => {
      console.log('promise1 -6') // 放在微任务1
  })

  a1()

  let promise2 = new Promise((resolve) => {
      resolve('promise2.then')
      console.log('promise2 -4')
  })

  promise2.then((res) => {
      console.log(res +'-8') // 放在微任务 3
      Promise.resolve().then(() => {
          console.log('promise3 -9') // 放在微任务4
      })
  })
  console.log('script end -5')


   
复制代码