Execute a function after N async calls in javascript/jQuery

Question

I have 7 async functions calls after which I need to execute a function. Sample structure of code.

Code

<script>
(function(){

   f1();
   f2();
   f3();
   f4();
   f5();
   f6();
   f7();

   // execute final() when f1-f7 async function have executed. 
    //  All the function have ajax request
   final();

});
</script>

My Current Approach

<script>
    (function(){
       var finalExecuted = false;
       f1();
       f2();
       f3();
       f4();
       f5();
       f6();
       f7();

       // execute final() when f1-f7 async function have executed. 
        //  All the function have ajax request

      setInterval(function(){ 
       if($.active == 0 && !finalExecuted) {
         final();
         finalExecuted = true;
       } },500); 

       });
 </script>

Is this the correct approach to do? All the function f1-f7 are different functions and fetch different values from API's.

How do your function indicate they are finished? Can/do they return a promise? — Mark
– Mark, Commented Apr 24, 2019 at 14:53
Related: stackoverflow.com/questions/5436327/… (though the accepted answer is for an out-of-date version, it's still relevant and there's lots of info in the other answers) — fdomn-m
– fdomn-m, Commented Apr 24, 2019 at 14:56
you are using ajax requests, if you are using JQuery you will probably work with promises — iliasse
– iliasse, Commented Apr 24, 2019 at 15:01

iliasse · Accepted Answer · 2019-04-24 15:16:21Z

2

The approach you've used is good, A solid approach of working with asynchronous functions would be the following :

you are using ajax requests, if you are using JQuery to make your AJAX requests then you are working with promises, here is a solution you can use :

Create an array of promises

var myPromises = [f1(),f2(),f3(),f4(),f5(),f6(),f7()];

now that you have your array set up use Promise.all function

Promise.all(myPromises).then(function(vals){
    // write your code here
});

Promise.all gets invoked once all your async tasks passed in the array have finished executing.

edited Apr 24, 2019 at 15:16

answered Apr 24, 2019 at 15:06

iliasse

2571 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DrCord Over a year ago

setInterval will go off every 500ms and check if it should run

iliasse Over a year ago

thank you I've updated my answer I thought it was a setTimeout

Kien Pham · Accepted Answer · 2019-04-24 15:09:50Z

2

If your functions return a promise, use them.

Using async/await:

(async function(){
       let res1 = await f1();
       let res2 = await f2();
       let res3 = await f3();
       ...

       if(res1 && res2 && res3 && ... && resN)
          final();
       });

Using Promise:

let promise1 = f1(); // some Promise in f1()
let promise2 = f2();
...
let promises = [promise1, promise2, ...];
Promise.all(promises).then((res) => final());

If not? Why don't you use it? create a Promise in onload or onreadystatechange then do like above. Or you can try fetch

answered Apr 24, 2019 at 15:09

Kien Pham

1089 bronze badges

1 Comment

iliasse Over a year ago

this is a working solution, that would be great if each request depended on the previous one. It would be prefered to use Promise.all in case each request is independent

Collectives™ on Stack Overflow

Execute a function after N async calls in javascript/jQuery

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related