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, Apr 24 '19 at 14:53
If they do, you can use [`Promise.all`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) — George, Apr 24 '19 at 14:55
Related: https://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-done (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) — freedomn-m, Apr 24 '19 at 14:56
you are using ajax requests, if you are using JQuery you will probably work with promises — iliasse, Apr 24 '19 at 15:01
@MarkMeyer no they don't return a promise, can we do it in jQuery — Abhishek, Apr 25 '19 at 04:33

iliasse · Accepted Answer · 2019-04-24T15:16:21.130

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 '19 at 15:16

answered Apr 24 '19 at 15:06

iliasse

247
1
7

1

setInterval will go off every 500ms and check if it should run – DrCord Apr 24 '19 at 15:11
thank you I've updated my answer I thought it was a setTimeout – iliasse Apr 24 '19 at 15:16

score 2 · Answer 2 · answered Apr 24 '19 at 15:09

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

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 — iliasse, Apr 24 '19 at 15:14

Execute a function after N async calls in javascript/jQuery

2 Answers2