AJAX asynch callback working correctly but how do I wait for the returned values

Question

My main EXTJS function is calling three different AJAX asynch functions.The good news is that each AJAX function is successfully returning a boolean callback on whether the AJAX GET call was successful or not.

The problem - I need to perform additional post business logic from my main calling function once the boolean results have been returned from all three AJAX functions.

But as it is async the code will not wait for the async functions to complete and will fly through.

Any ideas on how I can get my code to GRACEFULLY wait until the typeof status is no longer 'undefined' ?

I am not near my code right now but here is a rough approximation.

function main(){
  var status1, status2, status3, result1, result2,result3;

    thisIsAsynchFunction1(args,function(result1){
        status1 = result1;
    });
    thisIsAsynchFunction2(args,function(result1){
        status2 = result1;
    });

    thisIsAsynchFunction1(args,function(result1){
        status3 = result1;
    });

    // Perform logic based on callback from functions above

}

Thank You.

Answer 1

You cannot make Javascript wait. It simply doesn't work that way. What you can do is to trigger your final action when you discover that all three async results are done. Without redesigning your code to use promises (which would be the modern way to do this), you could do something like this:

function main(callbackFn){
  var status1, status2, status3, doneCnt = 0;

    thisIsAsynchFunction1(args,function(result1){
        status1 = result1;
        ++doneCnt;
        checkDone();
    });
    thisIsAsynchFunction2(args,function(result1){
        status2 = result1;
        ++doneCnt;
        checkDone();
    });

    thisIsAsynchFunction1(args,function(result1){
        status3 = result1;
        ++doneCnt;
        checkDone();
    });

    // Perform logic based on callback from functions above
    function checkDone() {
        // if all three results are done, then call the callback
        if (doneCnt === 3) {
            callbackFn(status1, status2, status3);
        }
    }
}

// call main and pass it a callback function
main(function(s1, s2, s3) {
    // all three async results are available here
});

// Be careful because code here will execute BEFORE the async results are done
// any code that must wait for the async results must be in the above callback

---

A newer type of approach would be to have each async operation return a promise and when each async operation completes it would resolve its promise with its result. Then, you could use a promise library function (often called .when() to trigger a callback when all three promises were done. Many modern day JS libraries already return promises from ajax calls (such as jQuery) so the promise is already there.

I don't know ExtJS myself, but looked in its documentation and didn't see promise support yet and I found one thread discussing the fact that promises were not going to be in version 5. So, perhaps you just go with the counter design above or maybe ExtJS has some of its own support for monitoring when multiple async operations are all done.