Question

This question is trying to confirm my understanding and how best to solve the situation at hand.

In my application, let say I have five containers and each of these containers has its own data source URL.

Upon loading of the page, all five need to ask the server, retrieve the data and display it.

Currently, as soon as the page is loaded, I fire the jquery ajax.post method for each of the containers in a loop. The loop executes instantly and in Firebug I see all these ajax requests as “processing”

Now my understanding is that javascript is single threaded so all of these ajax requests are still somewhere in the browser’s execution queue, right?

What I want is that even though I fired all the 5 ajax post requests in a loop, it should hit the server only one after the other.

For e.g 1st Ajax call success or failure –> Call 2nd ajax post –wait for success or failure and then fire the third ajax post and so on.

I don’t want to hit the server with 5 parallel ajax calls so I want to confirm that the ajax.post for all those 5 containers in a loop is not a parallel operation.

If for any reason there is a chance of some browser doing parallel requests then I would like to implement a simple chaining mechanism which I can do it using the call back function of each ajax post.

I looked at the jquery queue function but the calls are q’d for the same object. In my case I need to call same function on different objects in a sequential manner.

If you can tell me what is the best practice, and whether my assumptions and understanding needs corrections.

Thank you

Answer 1

You could also use recursion—something like so…

function chainContent(container) {
    $.ajax({
        url: container.data('url'),
        success: function(html) {
            container.html(html);
            var next = container.next();
            if (next != null) chainContent(next);
        }
    });
}

loadContent($('#container_1'));

And the HTML…

<div id="container_1" data-url="load_1.htm"></div>
<div id="container_2" data-url="load_2.htm"></div>
<div id="container_3" data-url="load_3.htm"></div>