Chain ajax and execute it in sequence. Jquery Deferred

Question

I have 3 processes that needs ajax to complete. But it is asynchronous and it fails to do what I wanted to do..

Lets say:

function a(param1, param2) {
     $.post(..., function(result){
         if(result){
            b();
         } else {
            console.log("failed a");
         }
     })
}

function b() {
      $.post(..., function(result){
         if(result){
            c();
         } else {
            console.log("failed b");
         }
     })
}

function c() {
     $.post(..., function(result){
         if(result){
            console.log("successful");
         } else {
            console.log("failed b");
         }
     })
}

I want it to execute like this

a
b
c

That code will work perfectly, as you can see.. but if use a loop.

 var data = [{param1 : 1235, param2: 3214},  {param1 : 5432, param2: 9876}];

 $.each(data, function(k,v){
      a(v.param1, v.param2)
 });

It will not work as expected and will just do:

a
a
b
b
c
c

instead of

a
b
c
a
b
c

nothing is wrong with ur structure.. can u give more detail abt the code.. — Sarath, May 05 '13 at 13:14
yeah, there is nothing wrong with it, but if you read along, the execution of code if looped is aa,bb,cc instead of abc,abc — Joey Hipolito, May 05 '13 at 13:15
so hw ur keeping track of which is called first.. now u put console only on fail.. — Sarath, May 05 '13 at 13:18
actualy u wan to make the call with async: false.. but that is a bad practice.. — Sarath, May 05 '13 at 13:20
it does not matter how do i keep track of it, but it, it is not shown in the code, but yes, if you console.log("name of func"), it will give the sequence I told. — Joey Hipolito, May 05 '13 at 13:20
yes, this is a bad practice.. and is very slow.. so i am asking for other solutions.. — Joey Hipolito, May 05 '13 at 13:21
Why so many post requests? Can't the code request once in bulk instead of 3 separate requests? — Joseph, May 05 '13 at 13:22
@JosephtheDreamer I can't do that, lets say I need to login first, then do stuffs, like post, then logout, then relog again.. it cant be done in one — Joey Hipolito, May 05 '13 at 13:23
@JoeySalacHipolito if you explain what you are trying to do, maybe there are alternative approaches rather than figuring out how to chain 3 AJAX requests without messy code. — Joseph, May 05 '13 at 13:26
No you wouldn't. Your page has already loaded. You perform your call synchronously, that's **still in the background** - so each one is executed in order. But it's asynchronous to the DOM loading etc — Jimbo, May 05 '13 at 14:49

Beetroot-Beetroot · Answer 1 · 2013-05-05T19:42:59.730

There are many ways to write this kind of thing.

A flexible approach is separate "actions" from "sequence", allowing :

functions a, b, c to initiate an asynchronous (ajax) action, with no knowledge of how they are to be sequenced
a, b, c to be reusable, as part of one or more sequences or individually, as required.

Here's a way to code this approach, using .then() exclusively for the chaining logic :

function a() {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject('a').promise();//convert success to failure.
    }, function() {
        return 'a';//continue on failure path.
    });
}
function b() {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject('b').promise();//convert success to failure.
    }, function() {
        return 'b';//continue on failure path.
    });
}
function c() {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject('c').promise();//convert success to failure.
    }, function() {
        return 'c';//continue on failure path.
    });
}

a().then(b).then(c).then(function() {
    console.log("successful");
}, function(id) {
    console.log("failed: " + id);
});

Alternatively, if you want to have a single asynchronous function, a, called from within a loop then the code could be something like this :

function a(obj) {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject(obj.id).promise();//convert success to failure.
    }, function() {
        return obj.id;//continue on failure path.
    });
}

var data = [{id:'A', param1:1235, param2:3214},  {id:'B', param1:5432, param2:9876}];
//Note how IDs are included so these data objects can be identified later in failure cases.

var dfrd = $.Deferred();//starter Deferred for later resolution.
var p = dfrd.promise();//A promise derived from the starter Deferred, forming the basis of a .then() chain.

//Build a .then() chain by assignment
$.each(data, function(i, obj) {
    p = p.then( function() {
        return a(obj);
    });//By not including a fail handler here, failures will pass straight through to be handled by the terminal .then()'s fail handler.
});

//Chain a terminal .then(), with success and fail handlers.
p.then(function() {
    console.log("successful");
}, function(id) {
    console.log("failed: " + id);
});

dfrd.resolve();//Resolve the starter Deferred to get things started.

thanks for the deferred example, exactly what i was looking for!! — Derek Adair, Nov 08 '14 at 23:22
so if this were in a function, would you return `dfrd` so the caller can resolve it? or would you resolve it here and return the promise so the caller can append .then()s to it? — ekkis, Apr 01 '17 at 20:15

thebreiflabb · Answer 2 · 2013-05-05T13:43:56.103

You can chain asynchronous calls like ajax calls using jQuery's deferred object and using 'then'.

You can also change it to use functions that returns a deferred promise object, instead of an ajax call as I have in my example.

http://jsfiddle.net/q4cFv/

(Example with async function: http://jsfiddle.net/q4cFv/1/)

$(function() {
    var delay = 3,
        span = $('span'),
        posts = [
            {
                input1: 'My name 1',
                input2: 'My address 1',
                input3: 'My country 1'
            },
            {
                input1: 'My name 2',
                input2: 'My address 2',
                input3: 'My country 2'
            },
            {
                input1: 'My name 3',
                input2: 'My address 3',
                input3: 'My country 3'
            },
            {
                input1: 'My name 4',
                input2: 'My address 4',
                input3: 'My country 4'
            }
        ],
        looper = $.Deferred().resolve();

    $.each(posts, function(i, data) {
        looper = looper.then(function() {
            return $.ajax({
                data: {
                    json: JSON.stringify(data),
                    delay: delay
                },
                method: 'post',
                url: '/echo/json/',
                dataType: 'json'
            }).done(function(response) {
                span.append('Response:<br />');
                for(key in response) {
                    span.append(key + ': ' + response[key] + '<br />');
                }
                $('span').append('Waiting ' + delay + ' seconds<br /><br />');
            });
        });
    });
});

i think this is what I am looking for... deferred. – Joey Hipolito May 05 '13 at 13:45 — Joey Hipolito, May 05 '13 at 13:45

Alejandro Cobo Cobo · Answer 3 · 2013-10-02T10:52:39.203

I see that c doesn't depend of b result, and b doesn't depend of a result.

Following the GRASP principles (http://en.wikipedia.org/wiki/GRASP_(object-oriented_design), a mustn't know b and b mustn't know c.

When we program, to remember the GRASP principles or guidelines is very important.

High Cohesion and Low Coupling mean that our code will be better, more reusable and easier to maintain.

The main function which knows a, b, and c must build the chained calls.

The functions would be:

    function a(param1, param2) {

        var deferred = $.Deferred();

        console.log("    function a: begin. Params " + param1 + " and " + param2);

        mockPost("a_url").done(function() {
            console.log("    function a: end ok. Params " + param1 + " and " + param2);
            deferred.resolve();
        }).fail(function() {
            console.log("    function a: end fail. Params " + param1 + " and " + param2);
            deferred.reject();
        });

        return deferred.promise();
    }

    function b() {

        var deferred = $.Deferred();

        console.log("    function b: begin");

        mockPost("b_url").done(function() {
            console.log("    function b: end ok.");
            deferred.resolve();
        }).fail(function() {
            console.log("    function b: end fail.");
            deferred.reject();
        });

        return deferred.promise();
    }

    function c() {

        // We suppose that c function calls to post function and anything more
        return mockPost("c_url");
    }

The main function would be:

    // Array with params for a function (a function is the first link in chain)
    var data = [{param1 : 1235, param2: 3214},  {param1 : 5432, param2: 9876}];

    // Array with calls to each fixed sequence a, b, and c. We iterate over data array
    var arrayFunctions = [];
    $.each(data, function(i,obj) {
        arrayFunctions.push(
            function() {
                console.log("Params in data with index " + i + ":");

                // We define the fixed sequence: a with params, b without params and c without params 
                return $.iterativeWhen( 
                    function() {
                        return a(obj.param1, obj.param2);
                    },
                    b,
                    c
                );
            }
        )
    });

    // Start the global process
    $.iterativeWhen.apply($, arrayFunctions)
    .done(function() {
        console.log ("----------------");
        console.log ("> Global Success");       
    })
    .fail(function() {
        console.log ("--------------");
        console.log ("> Global Fail");
    });

$.iterativeWhen doesn't exist in jQuery, so I have built it. It works with jQuery 1.8 and later versions.

$.iterativeWhen = function () {

    var deferred = $.Deferred();
    var promise = deferred.promise();

    $.each(arguments, function(i, obj) {

        promise = promise.then(function() {
            return obj();
        });
    });

    deferred.resolve();

    return promise;
};

The mockPost function simulates a call to $.post with a success probability:

function mockPost(url) {

        var deferred = $.Deferred();

        setTimeout(function() {
            if (Math.random() <= 0.9) {
                console.log("        request url: " + url +  "... ok");
                deferred.resolve();
            } else {
                console.log("        request url: " + url +  "... fail");
                deferred.reject();
            }
        }, 1000);

        return deferred.promise();
    }

The log output is:

Params in data with index 0: 
    function a: begin. Params 1235 and 3214 
        request url: a_url... ok 
    function a: end ok. Params 1235 and 3214 
    function b: begin 
        request url: b_url... ok 
    function b: end ok. 
        request url: c_url... ok 
Params in data with index 1: 
    function a: begin. Params 5432 and 9876
        request url: a_url... ok
    function a: end ok. Params 5432 and 9876 
    function b: begin 
        request url: b_url... ok 
    function b: end ok. 
        request url: c_url... ok 
---------------- 
> Global Success

jsFiddle here: http://jsfiddle.net/E2tp3/

score 3 · Answer 4 · answered May 05 '13 at 13:27

Your problem is that you're calling all the a s at once but you want to wait for the first cycle before going to the next. You want to wait for the previous 'a' cycle to finish before you start the next cycle.

Let's assume a,b,c accept a callback, and pass it on,

a would look like

function a(param1, param2,callback) {
     $.post(..., function(result){
         if(result){
            b(callback);
         } else {
            console.log("failed a");
         }
     })
}

b would go like:

function b(callback) {
      $.post(..., function(result){
         if(result){
            c(callback);
         } else {
            console.log("failed b");
         }
     })
}

And c would look like:

function c(callback) {
     $.post(..., function(result){
         if(result){
            console.log("successful");
         } else {
            console.log("failed b");
         }
         callback();
     })
}

This lets us know when a cycle is complete. Which lets us write:

var data = [{param1 : 1235, param2: 3214},  {param1 : 5432, param2: 9876}];

var index = 0;
(function updateData(){
    a(data[index].param1,data[index].param2,function(){ //call a with the data
        index++;//update the index 
        updateData(); // start the next cycle
    });
});

This is __Sample Code__ it is intended for _learning_ . For example you need to check if you finished the array and not do recursion then — Benjamin Gruenbaum, May 05 '13 at 16:49
i should get the length of the array right? haha,, sorry about that.. I press the add comment before thinking — Joey Hipolito, May 05 '13 at 17:07
You need to check `data.length` after the check for `index++` . Only call `updateData` if the index is in bounds. — Benjamin Gruenbaum, May 05 '13 at 17:47

score 3 · Answer 5 · answered Oct 30 '13 at 11:25

Here is an wonderfully simple and highly effect AJAX chaining / queue plugin. It will execute you ajax methods in sequence after each other.

It works by accepting an array of methods and then executing them in sequence. It wont execute the next method whilst waiting for a response.

//--- THIS PART IS YOUR CODE -----------------------

$(document).ready(function () {

var AjaxQ = [];
AjaxQ[0] = function () { AjaxMethod1(); }
AjaxQ[1] = function () { AjaxMethod2(); }
AjaxQ[3] = function () { AjaxMethod3(); }

//Execute methods in sequence
$(document).sc_ExecuteAjaxQ({ fx: AjaxQ });

});

//--- THIS PART IS THE AJAX PLUGIN -------------------

$.fn.sc_ExecuteAjaxQ = function (options) {

//? Executes a series of AJAX methods in dequence

var options = $.extend({

    fx: [] //function1 () { }, function2 () { }, function3 () { }

}, options);

if (options.fx.length > 0) {

    var i = 0;

    $(this).unbind('ajaxComplete');
    $(this).ajaxComplete(function () {

        i++;
        if (i < options.fx.length && (typeof options.fx[i] == "function")) { options.fx[i](); }
        else { $(this).unbind('ajaxComplete'); }

    });

    //Execute first item in queue
    if (typeof options.fx[i] == "function") { options.fx[i](); }
    else { $(this).unbind('ajaxComplete'); }

}

}

Chain ajax and execute it in sequence. Jquery Deferred

5 Answers5

Linked