是什么使`async / await`语句在ES6中顺序运行还是并行运行？

如何解决是什么使`async / await`语句在ES6中顺序运行还是并行运行？

我已经遍历了线程Any difference between await Promise.all() and multiple await?，所以我对Promise.all和多次等待一清二楚。

不过，对于以下两种情况我还是不太清楚。

在情况1中为什么它顺序执行（花费10s）而在情况2中它并行执行（花费4s）？

情况1：

function promiseWait(time) {
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve(true);
    },time);
  });
}

async function test1() {
  var t0 = performance.now()

  var a = await promiseWait(1000)
  var b = await promiseWait(2000)
  var c = await promiseWait(3000)
  var d = await promiseWait(4000)

  var t1 = performance.now()
  console.log("Call to doSomething took " + (t1 - t0) + " milliseconds."); //takes 10secs
  
}
test1()

情况2：

function promiseWait(time) {
  return new Promise((resolve,time);
  });
}

async function test2() {
  var t0 = performance.now()

  const p1 = promiseWait(1000);
  const p2 = promiseWait(2000);
  const p3 = promiseWait(3000);
  const p4 = promiseWait(4000);

  const a = await p1;
  const b = await p2;
  const c = await p3;
  const d = await p4;

  var t1 = performance.now()
  console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.")
}

test2()

解决方法

在第一种情况下，由于每次调用await之前的promiseWait，甚至要开始执行对promiseWait的下一次调用，它都需要等到第一次调用{ promiseWait已完全完成。这样您会看到顺序执行。

在第二种情况下，在开始等待它们之前，您已经调用了promiseWait函数 all 。因此promiseWait已经开始执行，那么您正在等待结果。

在第一种情况下，明智的做法是，对setTimeout的下一次调用必须等待，直到第一个setTimeout到期为止。因此，第二个，第三个和第四个计时器需要等待，直到第一个计时器到期并解析了承诺后才能进行调度。

在秒的情况下，您安排setTimeout一个接一个的呼叫，因此计时器 所有已排队的 。然后，您只是在等待计时器到期并一一解决您的诺言。

,

在这种情况下，所有4个诺言都是同时开始的。因此，其setTimeout计时器在后台并行运行。

计时器之间的差异为1秒，因此，如果在等待之间放置控制台日志，则应该大约每秒钟看到一个新的控制台日志。

function promiseWait(time) {
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve(true);
    },time);
  });
}

async function test2() {
  var t0 = performance.now()

  console.log("putting promises in que");
  const p1 = promiseWait(1000);
  const p2 = promiseWait(2000);
  const p3 = promiseWait(3000);
  const p4 = promiseWait(4000);
  console.log("promises where added to the que");

  const a = await p1;
    console.log("1")
  const b = await p2;
    console.log("2")
  const c = await p3;
    console.log("3")
  const d = await p4;
    console.log("4")
    
  var t1 = performance.now()
  console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.")
}

test2()

形象化地看起来像这样：

setTimeout(() => {
   let divs = document.querySelectorAll("div").forEach(div => {
      div.style.setProperty("width","100%")
   })
},500)

div {
   height: 30px;
   background: red;
   margin: 10px;
   width: 0px;
   transition: width 4s;
   color: white
}

<div style="max-width: 100px";>
Promise 1
</div>
<div style="max-width: 200px";>
Promise 2
</div>
<div style="max-width: 300px";>
Promise 3
</div>
<div style="max-width: 400px";>
Promise 4
</div>

案例1可视化：

let divs = document.querySelectorAll("div")

let delay = (time) => new Promise(res => setTimeout(res,time));

(async() => {
for(let i = 0; i < divs.length; i++) {
   await delay(i + 1000);
   divs[i].style.setProperty("width","100%");
}
})()

div {
   height: 30px;
   background: red;
   margin: 10px;
   width: 0px;
   transition: width 4s;
   color: white
}

<div style="max-width: 100px";>
Promise 1
</div>
<div style="max-width: 200px";>
Promise 2
</div>
<div style="max-width: 300px";>
Promise 3
</div>
<div style="max-width: 400px";>
Promise 4
</div>

,

进一步深入研究……（受Philip Roberts的启发）。

情况1：SetTimeout一次触发

function promiseWait(time) {
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve(new Date().toISOString().split('.')[0].replace('T',' '));
    },time);
  });
}

async function test1() {
  let timeStamp = new Date();
  var t0 = new Date();
  console.log("t0",t0)

  var a = await promiseWait(1000)
  console.log("a",a)
  var b = await promiseWait(2000)
  console.log("b",b)
  var c = await promiseWait(3000)
  console.log("c",c)
  var d = await promiseWait(4000)
  console.log("d",d)
  
  var t1 = new Date();
  console.log("t1",t1)
  console.log("Call to doSomething took " + (t1 - t0) + " milliseconds."); //takes 10secs

}
test1()

控制台：您会注意到每次超时的总和约为10秒。

情况2：SetTimeout同时触发。

function promiseWait(time) {
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve(new Date().toISOString().split('.')[0].replace('T',' '));
      },time);
    });
  }
  
  async function test1() {
    let timeStamp = new Date();
    var t0 = new Date();
    console.log("t0",t0)
  
    const p1 = promiseWait(1000);
    const p2 = promiseWait(2000);
    const p3 = promiseWait(3000);
    const p4 = promiseWait(4000);
    
    console.log("p1",p1);
    console.log("p2",p2);
    console.log("p3",p3);
    console.log("p4",p4);

    const a = await p1;
    console.log("a",a);
    const b = await p2;
    console.log("b",b);
    const c = await p3;
    console.log("c",c);
    const d = await p4;
    console.log("d",d);

    var t1 = new Date();
    console.log("t1",t1)
    console.log("Call to doSomething took " + (t1 - t0) + " milliseconds."); //takes 10secs
  
  }
  test1()

控制台：在这里，我们可以注意到计时器是一起启动的，因此导致〜4秒。 （最后一个计时器设置为4秒）。