为什么第一个等待会被忽略？ [复制]答案

【问题标题】：Why does the first await gets ignores? [duplicate]为什么第一个等待会被忽略？ [复制]
【发布时间】：2021-06-17 16:51:13
【问题描述】：

我想先将正文背景颜色更改为红色，然后再更改为蓝色。但它正在跳过红色。从 Colt Steele 的 The Web Developer Bootcamp 获得。

function changeBG(color, delay) {
  setTimeout(() => {
    document.body.style.backgroundColor = color;
  }, delay);
}

async function init() {
  await changeBG('red', 1000);
  await changeBG('blue', 1000);
}

init();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

【问题讨论】：

changeBG() 不返回承诺，所以await 没用
你的函数没有返回一个等待的承诺。
发帖前请search thoroughly。更多关于搜索here。有几十个问题问为什么await 不等待，有几十个答案说（大致）“因为你在不是承诺的事情上使用await。”

标签： javascript

【解决方案1】：

您不会从changeBG 返回Promise。以下将起作用：-

function changeBG(color, delay) {
return new Promise(resolve=>{
  setTimeout(() => {
    document.body.style.backgroundColor = color;
    resolve();
  }, delay);
})

}

async function init() {
  await changeBG('red', 1000);
  await changeBG('blue', 1000);
}

init();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

【讨论】：

【解决方案2】：

你需要返回 Promise 才能使用 async 和 await。

function changeBG(color, delay) {
  return new Promise((resolve) => {
    setTimeout(() => {
      document.body.style.backgroundColor = color;
      resolve();
    }, delay);
  })
}

async function init() {
  await changeBG('red', 1000);
  await changeBG('blue', 1000);
}

init();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

【讨论】：