Invoking a method after other methods are executed

Question

I have a situation in which I am trying to execute a a method which will eventually populate a view on UI. wanted to see if someone can guide me correctly.

On startup on jquery I call some functions as:

function XYX(){
    //Do Some stuff basically find some div's on UI and set them

    //Make a ajax call
    $.ajax(
    {

    }).
    done(function(data){

        //Use the data to set some values on UI

    })

}

function PQR(){
    //Do Some stuff basically find some div's on UI and set them

    //Make a ajax call
    $.ajax(
    {

    }).
    done(function(data){

        //Use the data to set some values on UI

    })

}

Now what happens is that the returned results from the two ajax calls are setting fields on UI which I eventually want to use to set another view which again makes a ajax call and then uses its own result and result from XYZ and PQR to set something.

function FINAL(){
    //Do Some stuff basically find some div's on UI and set them

    //Make a ajax call
    $.ajax(
    {

    }).
    done(function(data){

        //Use the data and fields set by XYZ() and PQR() to set some values on UI

    })

    //Do some other stuff
}

Being AJAX calls I cannot trust the results to be available when the FINAL function is called and I cannot combine the three to generate the view.

What would be the best way to handle this scenario.

http://stackoverflow.com/questions/30911816/how-to-trigger-a-function-when-all-ajax-calls-in-a-function-are-completed this may help — Rino Raj, Feb 15 '16 at 16:25
You can look here too : https://api.jquery.com/jquery.when/ (especially the last example of the page) — Damien Fayol, Feb 15 '16 at 16:33
@rino I am not sure if i am thinking it right but i do not want to wait for other AJAX call to be complete on the page and there might be. Isn't Ajac complete is only going to fire after all ajax calls are done? — fireholster, Feb 15 '16 at 16:49
Mixing server technology with client technology tags in a client technology question ain't a good idea ... — , Feb 15 '16 at 16:59
@fireholster Please see the [revision history](http://stackoverflow.com/posts/35414230/revisions) for the change I've made. — , Feb 16 '16 at 09:26

score 2 · Accepted Answer · answered Feb 15 '16 at 16:44

First off, you should return the value of the promise from your two methods:

function XYX(){
    //Make a ajax call - return the Promise
    return $.ajax(
    {

    }).
    done(function(data){    
        //Use the data to set some values on UI    
    })    
}

Do the same with PQR().

Then use $.when to perform an action when both have completed

$.when(XYX(),PQR()).then(function(){
   //both XYX and PQR have completed
});

charlietfl · Answer 2 · 2016-02-15T16:53:03.810

You can use $.when() to run code when all three are completed. Just return the promise created by $.ajax within each function

function one(){
  return $.get('one.html').done(function(data){
    $('body').append(data);
  });      
}

function two(){
  return $.get('two.html').done(function(data){
    $('body').append(data);
  });      
}

function three(){
  return $.get('three.html').done(function(data){
    $('body').append(data);
  });      
}


$(function(){
   $.when(one(),two(),three()).done(function(resp1, resp2, resp3){
    // do something here when all are done
    $('body').append('<p>All done</p>')
   })
 });

Note that $.get() is a wrapper for $.ajax and used to simplify demo.

If order of execution of each of the done() within the individual functions is important you can use the $.when.done() callback to also process the data for each request instead of doing it within each function

DEMO

Invoking a method after other methods are executed

2 Answers2