I have a situation where I need to make 5 ajax calls. The second ajax call will be made after first call returns response, the third call is made when second call pletes and likewise fourth and fifth call.

There are 2 approach for this which I know, I could nest ajax calls on success of previous call or make async false before first call and make it true after last call. Could any one suggest which is and WHY it is the better way to acplish my task or there is some more better way to do this.

//First Way
$.ajax({
...
success:function(){
    $.ajax({
    ...
        success:function(){
            $.ajax({
            ...
                success:function(){
                    $.ajax({
                    ...
                        success:function(){
                              do something      
                        }
                    });
                }
            });
        }
    });
}
});

//second way 
$.ajaxSetup({
    async: false
});
$.ajax({
});
$.ajax({
});
$.ajax({
});
$.ajax({
});
$.ajax({
});
$.ajaxSetup({
    async: true
});

I have a situation where I need to make 5 ajax calls. The second ajax call will be made after first call returns response, the third call is made when second call pletes and likewise fourth and fifth call.

There are 2 approach for this which I know, I could nest ajax calls on success of previous call or make async false before first call and make it true after last call. Could any one suggest which is and WHY it is the better way to acplish my task or there is some more better way to do this.

//First Way
$.ajax({
...
success:function(){
    $.ajax({
    ...
        success:function(){
            $.ajax({
            ...
                success:function(){
                    $.ajax({
                    ...
                        success:function(){
                              do something      
                        }
                    });
                }
            });
        }
    });
}
});

//second way 
$.ajaxSetup({
    async: false
});
$.ajax({
});
$.ajax({
});
$.ajax({
});
$.ajax({
});
$.ajax({
});
$.ajaxSetup({
    async: true
});

• javascript
• jquery
• ajax

Share Improve this question Follow asked Apr 17, 2015 at 10:25 AbhishekAbhishek 43388 silver badges2020 bronze badges 6

• What is the logic that gets executed after each request? Is the logic of each similar, or do you just need to ensure that the calls happen in this sequence? Also note that async: false is very bad. Almost eval levels of bad ;) – Rory McCrossan Commented Apr 17, 2015 at 10:26
• Let us know the Reason and Situation which lead you to do this please. – Puneet Commented Apr 17, 2015 at 10:29
• @RoryMcCrossan My requirement is that the call happens in sequence one after another – Abhishek Commented Apr 17, 2015 at 10:30
• 1 In that case you will need to chain your calls as in your first example. – Rory McCrossan Commented Apr 17, 2015 at 10:30
• 1 You need Promises here. To learn more: javascriptplayground./blog/2015/02/promises Or jQuery may help you api.jquery./category/deferred-object – Anarion Commented Apr 17, 2015 at 10:50

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 6

Could any one suggest which is and WHY it is the better way to acplish my task...

Using async: false will make the calls synchronous, which locks up the UI of the browser while the calls are running. It's better to leave the UI responsive while the calls are running.

So leaving the calls asynchronous is best; there are a few ways to do that:

There's using the success handler, as you demonstrated:

$.ajax({
    /*...*/,
    success: function() {
        $.ajax({
            /*...*/,
            success: function() {
                $.ajax({
                    /*...*/,
                    success: function() {
                        $.ajax({
                            /*...*/,
                            success: function() {
                                $.ajax({
                                    /*...*/
                                });
                            }
                        });
                    }
                });
            }
        });
    }
});

(I'm assuming you've either registered a global ajax error handler, or that you have one in /*...*/ above.)

There's using a promise chain instead, which is quite similar:

$.ajax({/*...*/})
    .done(function() {
        $.ajax({/*...*/})
            .done(function() {
                $.ajax({/*...*/})
                    .done(function() {
                        $.ajax({/*...*/})
                            .done(function() {
                                $.ajax({/*...*/});
                            });
                    });
            });
    });

Or you can use a function loop, like so:

(function() {
    var calls = [
        function() { $.ajax({/*...*/, success: next)},
        function() { $.ajax({/*...*/, success: next)},
        function() { $.ajax({/*...*/, success: next)},
        function() { $.ajax({/*...*/, success: next)},
        function() { $.ajax({/*...*/, success: next)}
    ];
    var index = 0;
    next();

    function next() {
        if (index < calls.length) {
            // Do the next, increment the call index
            calls[index++]();
        }
    }
})();