CODEWITHSUNDEEP
javascriptasync-await
Sathya Narayanan GVK
Sathya Narayanan GVK

Reputation: 939

Wait for the first await to complete before second await -Async/await

I am trying to make the second function to wait until the completion 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 completes its execution, then it should go to the second.

Upvotes: 4

Views: 2387

Answers (5)

vaibhav pandey
vaibhav pandey

Reputation: 69

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();

Upvotes: 0

Creative
Creative

Reputation: 1190

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>

Upvotes: 1

Rustam Pulatov
Rustam Pulatov

Reputation: 665

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);
    });
}

Upvotes: 1

this is yash
this is yash

Reputation: 533

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 completed

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

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

Upvotes: 0

Krzysztof Krzeszewski
Krzysztof Krzeszewski

Reputation: 6749

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 complete 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()

Upvotes: 8

Related Questions