CODEWITHSUNDEEP
javascriptjqueryajax
UpQuark
UpQuark

Reputation: 801

What is a good way to call a function when two separate Ajax calls complete?

So I have some JS similar to the following simplified version:

var MyAjax = $.ajax({
    url: 'api/myApi',
    type: "POST",
    data: myData,
    dataType: "json",
    success: function (data) {
        if (condition) {
            var weightCounts = $.ajax({
                url: 'api/myApi',
                type: "POST",
                data: myConditionalData,
                dataType: "json",
                success: function (conditionalData) {
                    MyExternalMethod(data, conditionalData)
    }
});

Basically I have two Ajax calls. I have one that retrieves some data, and a second that retrieves some data if an additional setting is enabled. The reason the conditional call is nested in the success event of the main call is because the args for MyExternalMethod() are generated by these calls and so they both need to complete.

Conceptually though, these calls are totally independent of one another, and the conditional call does not need to wait for the success event of the initial call, that was just the best method I could think of at the time of writing this code. I would like to refactor this to fix the slowness of waiting on the first request to execute the conditional, but I am not sure of the best method.

My best idea so far is something like:

var firstData = null;
var secondData = null;

var MyFirstAjax = $.ajax({
    url: 'api/myApi',
    type: "POST",
    data: myData,
    dataType: "json",
    success: function (data) {
        firstData = data;
        if (secondData){
            MyExternalMethod(firstData, secondData)
        }

});

var MySecondAjax = $.ajax({
    url: 'api/myApi',
    type: "POST",
    data: myData,
    dataType: "json",
    success: function (data) {
        secondData = data;
        if (firstData){
            MyExternalMethod(firstData, secondData)
        }
});

Is there a standard way other than using these variables as flags? I'm used to kind of flying by the seat of my pants as far as JS works, but I'm trying to write cleaner, more standards-oriented code so I'm wondering if there is a more advantageous way than the above (or does the above have any major drawbacks that I'm not seeing).

Thanks

Upvotes: 0

Views: 209

Answers (2)

Alvin K.
Alvin K.

Reputation: 4379

Short answer: Libraries like async.js would help.

Long answer: There are a few way to handle this.

Basically both ajax needs to trigger the same callback say function check_ajax() on success:, which checks if firstData AND firstData is available. If so, call MyExternalMethod.

A good reference: http://book.mixu.net/node/ch7.html

Upvotes: 0

Anthony Chu
Anthony Chu

Reputation: 37520

You can use $.when()...

var MyFirstAjax = $.ajax({
    url: 'api/myApi',
    type: "POST",
    data: myData,
    dataType: "json"
});

var MySecondAjax = $.ajax({
    url: 'api/myApi',
    type: "POST",
    data: myData,
    dataType: "json"
});

$.when(MyFirstAjax, MySecondAjax).then(function (firstResult, secondResult) {
    var firstData = firstResult[0];
    var secondData = secondResult[0];
    MyExternalMethod(firstData, secondData)
});

Upvotes: 4

Related Questions