Javascript Question posted in
A very good W3school tutorial can be found here.

How to wait for function call in Javascript without calling it directly

I have several functions that call each other asyncronously, and I need to catch a situation when last functionis called.
await statement supposes to call a function I should wait, but it is not to be called directly

function First(){
  console.log('First is called');
  setTimeout(Second(), 1000);
  return;
}

function Second(){
  console.log('Second is called');
}

function Main(){
  First();
  console.log('I called First and I want that Second also is complete');
}

I try to use await, but the problem is that I need to call function First() but should wait until Second is called. And including await in every call seems to be too complicated, since the chain length is quite large.

The solution could be an infinite loop in Main until Second initiate a variable, but I feel there should be more clear solution.

Tags:

2

Answers


  1. 0

    you can use Promises. In your case, you can modify your First and Second functions to return Promises. This way, you can await the completion of Second without having to call it directly.

    like this

    function First() {
  console.log('First is called');
  return new Promise(resolve => {
    setTimeout(() => {
      Second();
      resolve(); // Resolve the promise after Second is called
    }, 1000);
  });
}

function Second() {
  console.log('Second is called');
}

async function Main() {
  await First(); // Wait for First to complete
  console.log('I called First and I want that Second also is complete');
}

Main();

    If you have a long chain of asynchronous functions where each function calls the next, you can still use Promises effectively.

    function First() {
  console.log('First is called');

  return new Promise((resolve) => {
    setTimeout(() => {
      Second().then(resolve); // Call Second and wait for it to resolve
    }, 1000);
  });
}

function Second() {
  console.log('Second is called');

  return new Promise((resolve) => {
    setTimeout(() => {
      Third().then(resolve); // Call Third and wait for it to resolve
    }, 1000);
  });
}

function Third() {
  console.log('Third is called');

  return new Promise((resolve) => {
    setTimeout(() => {
      LastFunction().then(resolve); // Call LastFunction and wait for it to resolve
    }, 1000);
  });
}

function LastFunction() {
  console.log('Last function is called');

  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(); // Resolve when the last function is done
    }, 1000);
  });
}

async function Main() {
  await First(); // Wait for the entire chain to complete
  console.log('All functions are complete');
}

// Call Main to start the process
Main();

    if this is what do you mean by catching the last one

    Login or Signup to reply.
  2. 0

    If you don’t want to use Promises for some reason (or if the example provided doesn’t fully illustrate the problem), perhaps you’re looking for a custom event?

    Your "second" operation can emit a custom event, and anything listening for that event can respond accordingly. For example:

    function first(){
  console.log('First is called');
  setTimeout(second, 1000);
  return;
}

function second(){
  console.log('Second is called');
  
  // emit an event when complete
  document.dispatchEvent(new Event('myEvent'));
}

function main(){
  first();
}

// listen for an emitted event
document.addEventListener('myEvent', e => console.log('I called First and I want that Second also is complete'));

main();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search