Queue AJAX calls

Question

Hello I am doing a Horizontal scrolling website like: http://vanityclaire.com/

However, rather than having one large HTML file, after the load of the homepage, I am ajaxing in the children of home, using jQuery .load().

At present I for-each div and ajax in ithe url that sits in the title. But the AJAX returns out of order, and as I add more pages don't fancy spanging the server with 30+ http:// requests.

How do I synchronously do the AJAX calls, ie wait for the first to comeback before a request another, or even send two at a time.

I have been scouring, and cannot figure out what I need.

This is my HTML:

<div id="mainLayout" class="fullwidth scrollArea">
    <div class="scrollItems">
      <div id="page-1" class="scrollItem" title="/">
        <div>HOME PAGE CONTENT</div>
      </div>
      <div id="page-2" class="scrollItem" title="/Page2.html">
        <div class="loading"> </div>
      </div>
      <div id="page-3" class="scrollItem" title="/Page3.html">
        <div class="loading"> </div>
      </div>

      <div id="page-4" class="scrollItem" title="/Page4.html">
        <div class="loading"> </div>
      </div>
      <div id="page-5" class="scrollItem" title="/Page5.html">
        <div class="loading"> </div>
      </div>
    </div>
  </div>

And my JS:

function s_loadingInitialPages() {
    var loadingItems = new Array();
    $(".scrollArea .scrollItem").each(function () {
        if ($(this).attr('title') != '/') {
            var oDelem = $(this);
            loadingItems.push(oDelem);
            //alert('test');
        }
    });

    for (i = 0; i < loadingItems.length; i++) {
        // title attribute is the URL to get
        var ajaxURL = loadingItems[i].attr("title") + '?ajaxPageContent=';
        $(loadingItems[i]).load(ajaxURL);

    }
}

Is there a plugin I can just keep adding functions to a queue, and let that handle it?

Answer 1

The trick is to use the callbacks. You make one ajax call and on its success callback you make the next one.

To do this just add them all to a queue and have a wrapper around it that sends them one by one.

I wrote one a few days ago. I'll show you an implementation in a second.

// Buffer class. Has a public append method that expects some kind of Task.
// Constructor expects a handler which is a method that takes a ajax task
// and a callback. Buffer expects the handler to deal with the ajax and run
// the callback when it's finished
function Buffer(handler) {
    var queue = [];

    function run() {
        var callback = function () {
             // when the handler says it's finished (i.e. runs the callback)
             // We check for more tasks in the queue and if there are any we run again
             if (queue.length > 0) {
                  run();
             }
        }
        // give the first item in the queue & the callback to the handler
        handler(queue.shift(), callback);
    } 

    // push the task to the queue. If the queue was empty before the task was pushed
    // we run the task.
    this.append = function(task) {
        queue.push(task);
        if (queue.length === 1) {
            run();
        }
    }

}

// small Task containing item & url & optional callback
function Task(item, url, callback) {
    this.item = item;
    this.url = url;
    this.callback = callback
}

// small handler that loads the task.url into the task.item and calls the callback 
// when its finished
function taskHandler(task, callback) {
    $(task.item).load(task.url, function() {
        // call an option callback from the task
        if (task.callback) task.callback();
        // call the buffer callback.
        callback();
    });
}

// create a buffer object with a taskhandler
var buffer = new Buffer(taskHandler);

for (i = 0; i < loadingItems.length; i++) {
    // title attribute is the URL to get
    var ajaxURL = loadingItems[i].attr("title") + '?ajaxPageContent=';
    buffer.append(new Task(loadingItems[i], ajaxURL));
}

Apologies for the wall of code. Just implement your own Task and Handler. The Buffer will work as long as the handler calls the second argument (the callback) when it's finished handling the task.

Then just pass it a task and a handler. The handler does the ajax and calls the callback from the buffer when the ajax returns.

For your specific example if what your loading takes a long time then this will take a long time to load all 30. The point of ajax is to have the server do stuff in parallel.

A far better solution in your case is to make 30 requests and then catch the results and make sure the results from your ajax calls are only appended to the dom in order. This involves using $.ajax and adding keeping track of order somehow.

That way the server will do it as fast as it can and you can server it in order once you get it. Alternatively if the things your doing are fast then queuing them in a buffer has no penalty.

Answer 2

Most browsers can handle 6 or more simultaneous ajax requests to a single domain.
http://www.browserscope.org/?category=network&v=top

If your script places 30 ajax requests at once, the first 6 requests will go through very quickly. After that, the browser may start assigning arbitrary wait periods of up to 5 seconds. Chrome is a prime example of this behavior.

Requests 1-6 return in 5 ms.

Requests 7-12 return in 5,005 ms.

Requests 11-18 return in 10,005 ms.

Requests 19-24 return in 15,005 ms.

Requests 25-30 return in 20,005 ms.

I recommend building a queue of function callbacks to handle all of your application's ajax requests and process no more than 6 of them at a time.

 var ajaxCownt = (ajaxCownt == null ? 0 : ajaxCownt); // Make limit globally accessible. var ajaxKue = (ajaxKue == null ? [] : ajaxKue); // Make queue globally accessible. function doMyAjaxRequest() { console.log("doing ajax request."); // Implement ajax request, here. } for (var i = 1;i <= 30;i++) { ajaxKue.push( function() { doMyAjaxRequest() } ); // Add request to queue. } while (ajaxCownt != null && ajaxCownt < 6 && ajaxKue != null && ajaxKue.length && ajaxKue.length > 0) { ajaxCownt++; console.log("incrementing pending ajax requests counter by 1."); ajaxKue.shift().call(); }; // Register an event to detect when an ajax request completes. // Allow for an additional ajax request to be processed. $( document ).ajaxComplete(function() { if (ajaxCownt && ajaxCownt > 0) { ajaxCownt--; console.log("decrementing pending ajax requests counter by 1."); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>