promise和定时器，以及async/await

<script>
    async function async1() {
      console.log("async1 start");
       //asyc2可以假设成两秒，console.log("promise1");
      //下面的同步任务假设成1秒，promise里面的微任务可以假设成3秒
      await async2();
      console.log("async1 end");
    }

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

    console.log("script start");

    setTimeout(() => {
      console.log("setTimeout");
    }, 0);

    async1();

    new Promise(function (resolve) {
      console.log("promise1");
      resolve();
    }).then(function () {
      console.log("promise2");
    });

    new Promise(function (resolve) {
      console.log("promise3");
      resolve();
    }).then(function () {
      console.log("promise4");
    });

    console.log("script end");

    /**
     * script start
     *  async1 start
     *  async2
     *  promise1
     *  promise3
     * script end
     * async1 end
     * promise2
     * promise4
     *  setTimeout
     * /
  </script>

image.png

首先，程序从顶部开始执行。打印输出 'script start'。

创建一个 setTimeout 定时器，将其添加到事件队列中。此时定时器的回调函数暂时不会立即执行。

调用 async1() 函数。

进入 async1() 函数内部。执行 console.log("async1 start")，打印输出 'async1 start'。

在 async1() 函数内部，执行 await async2()。这里 await 关键字会暂停 async1() 函数的执行，并等待 async2() 函数的完成。

执行 async2() 函数。打印输出 'async2'。

async2() 函数执行完毕，返回到 async1() 函数。

继续执行 async1() 函数内部的下一行代码，打印输出 'async1 end'。

async1() 函数执行完毕，返回到全局作用域。

接下来创建一个新的 Promise 对象，并立即执行其中的回调函数。执行 console.log("promise1")，打印输出 'promise1'。

解决（resolve）之前创建的 Promise 对象，并添加一个回调函数到微任务队列中。

创建另一个新的 Promise 对象，并立即执行其中的回调函数。执行 console.log("promise3")，打印输出 'promise3'。

解决（resolve）之前创建的第二个 Promise 对象，并添加一个回调函数到微任务队列中。

执行 console.log("script end")，打印输出 'script end'。

当执行栈为空时，事件循环检查微任务队列，并执行其中的回调函数。

执行第一个 Promise 的回调函数。打印输出 'promise2'。

执行第二个 Promise 的回调函数。打印输出 'promise4'。

最后，事件循环检查宏任务队列，执行 setTimeout 的回调函数。打印输出 'setTimeout'。注意，
尽管 setTimeout 的时间设为 0，但由于事件循环的机制，它需要等待当前任务完成后才会执行。