Queue multiple AJAX requests, waiting for response and not freezing browser?

Question

I am working a script, I need to loop an array of AJAX requests:

$('#fetchPosts').click(function(){ 

    for(var i=0; i < link_array.length; i++) {

        settings = {
           // some object not relevant
        }

        var status = main_ajaxCall(settings, i); // ajax call
     }
});

function main_ajaxCall(settings, i) {

   $.ajax({ 
     type: "POST",
     url: "../model/insert.php",
     data:{obj_settings: settings},
     dataType: "json",
     cache: false,
     success: function (data) {
         // some handeling here
         return 0;
     },
     error: function(XMLHttpRequest, textStatus, errorThrown) {
         return 1;
     },
};

Why does the AJAX requests fire instantly? It does not seem to wait for a response from model/insert.php, is there any way to force it to wait for a response before firing the next AJAX request?

EDIT 1:

It seems I wasnt clear, sorry, I dont want it to wait, I want to queue up the calls.

I cant make the call in one request, this is impossible in my current situation.

what do you mean by wait for the response? do you want to sent the looped requests in a sequential order — Arun P Johny, Jul 08 '13 at 02:45
Here's a generalized non-jquery technique to do this. Can easily do multiple threads (simultaneous requests) as well: http://stackoverflow.com/questions/13250746/process-chain-of-functions-without-ui-block/13252018#13252018 — slebetman, Jul 08 '13 at 03:01

score 5 · Accepted Answer · edited May 23 '17 at 12:34

Set async to false if you want to wait for a response (default: true)

$.ajax({
    async: false,
    ...

http://api.jquery.com/jQuery.ajax/

If you do not want blocking, you can set a success handler function using .ajaxComplete(), and you have to keep track of active AJAX connections if you want to wait for all to complete - How to know when all ajax calls are complete

The best solution would be to minimize the number of AJAX requests to one. If you have to make a loop of AJAX requests, the logic could be simplified somewhere (put that in the server perhaps?)

EDIT 1: (In response to OP edit)

If you want to queue the AJAX requests, this question has been answered before here:

You could also use these libraries (all you needed to do was Google):

it will freeze the browser – Arun P Johny Jul 08 '13 at 02:48 — Arun P Johny, Jul 08 '13 at 02:48
that it's going to freeze the browser – Jorge Jul 08 '13 at 02:48 — Jorge, Jul 08 '13 at 02:48

score 1 · Answer 2 · answered Jul 08 '13 at 02:49

It fires instantly and doesn't wait around because that's what AJAX does best (The first A stands for asynchronous).

The request to a server could take a long time to respond, and in most cases, don't want user's browser's freezing up or stopping them from doing anything else. If you do, you could probably just use a normal request.

This is the reason you give it functions for success error, so it can call them when the server responds.

If you want nothing to be able to happen in the browser while you're calling insert.php, you could drop an overlay (eg. dark div) over everything with a loading image and remove it on success.

Maybe replace the $('#fetchPosts') element with "loading..." text and then reverse it when done. Hiding visibility of the fetchPosts element and adding a different "loading.." element is a nice way.

score 0 · Answer 3 · 2013-07-08T03:03:52.010

Your AJAX call will wait for a response from the server, but wil do so asynchronously. That is, your script will continue to execute rather than block the browser while the server responds. When the server responds (or when the request times out - usually several seconds) your success: or error: functions will then execute.

The effect of your code here is to create several concurrent requests based on the link_array length.

You could specify async:false in your AJAX call, but this would freeze the browser while all the AJAX calls are made.

You should rewrite your code to execute all the handling as part of your success: function. I'd recommend you rewrite your code to assemble all your request into one, and make one AJAX call rather than several, and have the server return all the responses as one block. I can't suggest exactly how you do that - it's implementation dependent.

EDITED: In response to your clarification, if you want them to be called in order, you'll need the success function to call the next one. You'll then have a chain of success calls the next, whose success calls the next, whose success calls the next.. etc until the last one which does the final processing. One way would be to pass the call number to the success function.

Queue multiple AJAX requests, waiting for response and not freezing browser?

3 Answers3