• setTimeout,promise,promise.then, async,await执行顺序问题


    今天下午看了好多关于这些执行顺序的问题  经过自己的实践 终于理解了  记录一下
    就拿网上出现频繁的代码来说:

      async function async1() {
        console.log('async1 start');
        await async2();
        console.log('asnyc1 end');
      }
      async function async2() {
        console.log('async2');
      }
      console.log('script start');
      setTimeout(() => {
        console.log('setTimeOut');
      }, 0);
      async1();
      new Promise(function (reslove) {
        console.log('promise1');
        reslove();
      }).then(function () {
        console.log('promise2');
      })
      console.log('script end');

    然后是结果:

      script start

      async1 start

      async2

      promise1

      script end

      async1 end

      promise2

      setTimeout

    理解:

      js事件分两种: 宏任务(macro task) 和 微任务(micro task)

        宏任务包括: script(读取 执行script代码也算一种任务)  setTimeout  setInterval

        微任务包括:promise.then(注意是promise.then)  , process.nextTick

        事件执行顺序: 先执行宏任务, 然后执行微任务

      任务执行顺序:先执行同步代码,后执行异步代码

        上述代码的同步代码有哪些呢:

          console.log('script start');

          async1();

          console.log('async1 start');

          console.log('async2');

          console.log('promise1');

          console.log('script end');

          值得注意的是

          1. async声明的函数 

            如果没有await 跟普通函数一样 

            如果存在await  await之前的代码包括await紧跟的这个函数都是同步执行的

            await执行async2这个函数之后await让出了线程,把返回的promise加入了微任务异步队列,所以async1()下面的代码也要等待上面完成后继续执行;

            (自己理解:

              上述代码中  由于在执行async2之前  还没有执行new Promise  所以不会把promise.then这个微任务添加到异步队列中

              善于动手的小伙伴可以试着  把 new Promise那段代码放到async1();之前  会返现执行顺序不一样  

            )

          2. new Promise()是声明就立即执行的, promise.then才是异步;

        然后是异步代码:

          promise.then

          setTimeout

           

    以上是自己的实践➕理解   如有不对 请大神纠正

    async function async1(){
      console.log('a1 start');
      await async2();
      console.log('a1 end');
    }

    async function async2(){
      console.log('async2');
    }

    new Promise((resolve) => {
      console.log('promise1');
      resolve();
    }).then(() => {
      console.log('promise1 then');
    });

    async1();

    new Promise((resolve) => {
      console.log('promise2');
      resolve();
    }).then(() => {
      console.log('promise2 then');
    });

    执行这段代码  你会发现  promise.then  和  await之间的微妙关系  

  • 相关阅读:
    云时代架构阅读笔记一——架构师必备最全SQL优化方案
    虚拟机VMware安装Ubuntuix
    假期周总结八
    虚拟机VMware安装Kali Linux
    codeforces 401D (数位DP)
    2014 多校联合训练赛6 Fighting the Landlords
    lightoj 1224
    lightoj 1020 (博弈)
    lightoj 1019
    lightoj 1018 (状态压缩DP)
  • 原文地址:https://www.cnblogs.com/Mr-Rshare/p/10969044.html
Copyright © 2020-2023  润新知