Question

We have a script used for each .item:

$(".item").each(function(){
    item_link = "http://...";
    block = $('.block', this);
    $.get(item_link, function(data) {
        var src = $('img.slide', data).attr('src');
        block.html(src);
    });
});

item_link variable is uniquie for each query.

There can be 100 .item or more.

The problem is – server has limit on connections at the same time, that why some .item get var src, some not.

The best solution is to use just one .get at the same time. I think there should be some counter, if .get is finished – it gives message “I’m finished, you can start” to the next .get and so on.

How to do that?

Thanks.

Answer 1

The browser should automatically queue the requests and send each one after one of the previous two finish.

Therefore, your current code should work fine.
Check Fiddler or Firebug and see whether the requests are failing.

EDIT

You’re fighting a server throttle, not the browser’s connection limit.

You need to maintain an array of functions that send requests, then call the next function in the AJAX callback.

For example:

var requests = [];
function runFirstRequest() {
    if (requests.length > 0)
        requests.splice(0, 1)();  //Pop the first function from the queue and execute it
}


$(".item").each(function(){
    item_link = "http://...";
    block = $('.block', this);

    requests.push(function() {
        $.get(item_link, function(data) {
            var src = $('img.slide', data).attr('src');
            block.html(src);

            runFirstRequest();    //Send the next request
        });
    });
});

runFirstRequest();

---

However, sending hundreds of AJAX request is a bad idea.
You should modify your code to send a single AJAX request that returns all of the data you need.
This will solve your problem and make the page much faster.