Why does the first await gets ignores?

Question

I wanted to change the body background color to red first, and then to blue. But it's skipping the red. Got it from Colt Steele's 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>

Please [search thoroughly](/search?q=%5Bjs%5D+await+not+waiting) before posting. More about searching [here](/help/searching). There are dozens of questions asking why `await` isn't waiting, with dozens of answers saying (roughly) "because you're using `await` on something that isn't a promise." — T.J. Crowder, Mar 20 '21 at 14:02

score 4 · Answer 1 · answered Mar 20 '21 at 13:57

You're not returning Promise from changeBG. The following will work :-

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>

score 3 · Answer 2 · answered Mar 20 '21 at 13:59

You need to return Promise to use async and 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>

Why does the first await gets ignores?

2 Answers2