JavaScript 的事件循环

叁歲伎倆 2022-04-27 21:28 258阅读 0赞

// 事件循环中函数执行的顺序 其中包含 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')
    
    
       
    复制代码