javascript - Is there anyway to rewrite this function with async in the first function. Instead of a "new Promise"?

Question

This is the function that is working.

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

const rainbow = async() => {
  await delayedColorChange('red', 1000);
  await delayedColorChange('orange', 1000);
  await delayedColorChange('yellow', 1000);
  await delayedColorChange('green', 1000);
  await delayedColorChange('blue', 1000);
  await delayedColorChange('indigo', 1000);
  await delayedColorChange('violet', 1000);
  await delayedColorChange('pink', 1000);
  return 'ALL DONE';
};

rainbow().then(console.log);

question from:https://stackoverflow.com/questions/65945195/is-there-anyway-to-rewrite-this-function-with-async-in-the-first-function-inste

Answer 1

Is there anyway to rewrite this function with async in the first function. Instead of a “new Promise”?

No, there is not. Not if you want the function to return a promise that is tied to when the timer fires.

async functions are very useful when you are calling functions that already return promises and you want to use await to help with the control flow on those existing promise-returning functions.

But, when you have a function like setTimeout() that does not use a promise at all and you want to "promisify" it so you can use promise-based control flow, you will have to use some means of making a new promise and wrapping the existing callback in that new promise. For setTimeout(), the code you show is the standard way to do that.

It is a bit more common and generically useful to promisify just the timer because then you can use this lots of places and it is generally recommended when promisifying things to promisify at the lowest level (because it's more extensible and you build all your logic on top of promise-based control flow):

// promise-based timer
function delay(t, v) {
    return new Promise(resolve => {
        setTimeout(resolve, t, v);
    });
}

const delayedColorChange = (color, t) => {
    return delay(t).then(() => {
        document.body.style.backgroundColor = color;
    });
};

In this code the backgroundColor on the website is going straight to pink. why is that?

Your snippet in your question does not go straight to pink (if you just hit "run code snippet" right in your question) so if your real web page is going straight to pink, then something must be different in that implementation from this one.