javascript - Wait for the first await to complete before second await -Asyncawait - Stack Overflow

admin管理员组

文章数量:1301555

I am trying to make the second function to wait until the pletion of the first. In the following example, I am not able to achieve it. When exploring about async/await, it was said that the order of execution would be sequential. However, this does not seem to be the case here.

function one() {
  setTimeout(() => {
    console.log('Hi')
  }, 5000)
}

function two() {
  setTimeout(() => {
    console.log('Bye')
  }, 2000)
}

async function doAll() {
  await one();
  await two();
}
async function demo() {
  await doAll();
}

demo()

I am trying to make the second function to wait until the pletion of the first. In the following example, I am not able to achieve it. When exploring about async/await, it was said that the order of execution would be sequential. However, this does not seem to be the case here.

function one() {
  setTimeout(() => {
    console.log('Hi')
  }, 5000)
}

function two() {
  setTimeout(() => {
    console.log('Bye')
  }, 2000)
}

async function doAll() {
  await one();
  await two();
}
async function demo() {
  await doAll();
}

demo()

Output

Bye
Hi

In this example, since function two involves less time, 'Bye' is printed before the 'Hi'. But I am trying to make sure when the first function pletes its execution, then it should go to the second.

• javascript
• async-await

Share Follow edited Sep 16, 2019 at 10:19 Nick Parsons 51k66 gold badges5757 silver badges7575 bronze badges asked Sep 16, 2019 at 10:16 Sathya Narayanan GVKSathya Narayanan GVK 93922 gold badges1717 silver badges3333 bronze badges 3

• 1 await Promise.all([one, two]) maybe? – Roko C. Buljan Commented Sep 16, 2019 at 10:18
• 1 The first function does plete before the second. In fact, both functions plete near instantly, but the timeouts don't. – Robby Cornelissen Commented Sep 16, 2019 at 10:19
• 4 await works with Promises. Neither of your function return one. await one() makes no sense. – Yury Tarabanko Commented Sep 16, 2019 at 10:21

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 8

That's because functions that you defined can't be await ed in a sense that they do not return a promise, that can resolve. Instead they plete instantly/"resolve" instantly.

function one() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('Hi')
      resolve();
    }, 5000)
  })
}

function two() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('Bye')
      resolve();
    }, 2000)
  })
}

async function doAll() {
  await one();
  await two();
}
async function demo() {
  await doAll();
}

demo()

I think, promise must be:

function one() {
    return new Promise(resolve => {
       setTimeout(() => {
          console.log('Hi')
          resolve(x);
       }, 5000);
    });
}


function two() {
    return new Promise(resolve => {
       setTimeout(() => {
          console.log('Bye')
          resolve(x);
       }, 2000);
    });
}

You have multiple issues going on here. First, your functions one() and two() are not async, so they cannot be awaited. Secondly, your test code with the timeout is not an accurate test. The timeout function is not async either, to fix that, I wrapped it in a Promise so we could test with the timeout function.

See snippet:

async function one(){
  await timeout(5000);
  log("Hi");
}

async function two(){
  await timeout(2000);
  log("Bye");
}

async function demo()
{
  await one();
  await two();
}

demo();

function log(logText)
{
  var logNode = document.createTextNode(logText + " ");  
  document.getElementById("log").appendChild(logNode);
}

function timeout(ms)
{
    return new Promise(resolve => setTimeout(resolve, ms));
}

#log
{
  border: 1px solid black;
  width: 300px;
  height: 150px;
}

<div id="log"></div>

Firstly, you have to know that setTimeout() runs in a seperate thread and the programm execution, which is in the main thread will not stop even if you make it async.

In order to achieve your requirment you have to call the second function when the timer is pleted

async function one(){
  await setTimeout(()=>{
  console.log('Hi')
  two() //call the second function when the first timer is pleted.
  },5000)
}

function two(){
  setTimeout(()=>{
  console.log('Bye')
  },2000)
}

function one() {
  return new Promise(resolve => {
    setTimeout(() => {
     resolve(console.log("hi"))
    }, 5000);
  });
}
function two() {
  setTimeout(() => {
    console.log('Bye')
  }, 2000)
}
async function asyncCall() {
  var result1 = await one();
  var result2 = await two();
}

asyncCall();

本文标签： javascriptWait for the first await to complete before second await AsyncawaitStack Overflow