Calling a method after executing other methods

Question

I have a situation in which I am trying to execute a method that will eventually populate the view in the user interface. wanted someone to guide me right.

When launched in jquery, I call some functions like:

function XYX(){
    //Do Some stuff basically find some div 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 on UI and set them

    //Make a ajax call
    $.ajax(
    {

    }).
    done(function(data){

        //Use the data to set some values on UI

    })

}

Now it happens that the returned results from two ajax calls set up the fields in the user interface, which I ultimately want to use to set up another view that makes the ajax call again, and then uses its own result and the result from XYZ and PQR to set what- that.

function FINAL(){
    //Do Some stuff basically find some div 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 that will be available when the FINAL function is called, and I cannot combine these three to create a view.

.

Answer 1

, :

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

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

PQR().

$.when, ,

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

Answer 2

$.when() , . , $.ajax

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>')
   })
 });

, $.get() $.ajax .

done() , $.when.done() ,

DEMO