AJAX Call Queue

Question

Hi, I am making a horizontal scroll website, for example: http://vanityclaire.com/

However, instead of having one large HTML file, after loading the main page, I am ajaxing at children at home using jQuery.load ().

I am currently for-for-every div and ajax in the ithe url that is in the title. But AJAX is failing, and since I am adding more pages, it doesn't seem to you that you are starting the server with 30 + http: // requests.

How to synchronously make AJAX calls, i.e. wait for the first request to return before another request, or even send two at a time.

I cleaned and can not understand 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, can I just add functions to the queue, and let it handle it?

Answer 1

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

To do this, simply add them all to the queue and wrap around it, which sends them one at a time.

I wrote once a few days ago. I will show you the 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 finished function Buffer(handler) { var queue = []; function run() { var callback = function () { // when the handler says it finished (ie 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)); } 

Sorry for the code wall. Just implement your own task and handler. The buffer will work until the handler calls the second argument (callback) when it finishes processing the task.

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

In your specific example, if your download takes a long time, it will take a long time to load all 30. The ajax point is for the server to do the material in parallel.

In your case, a much better solution is to make 30 requests and then catch the results and make sure that the results of your ajax calls are only added to dom in order. This is due to the use of $ .ajax and the addition of order tracking.

Thus, the server will do this as quickly as possible, and you will be able to download it as soon as you receive it. Alternatively, if your actions are performed quickly, then their order in the buffer is not fined.

Answer 2

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

If your script puts 30 ajax requests right away, the first 6 requests will go through very quickly. After that, the browser may begin to assign arbitrary waiting periods of up to 5 seconds. Chrome is a prime example of this behavior.

Requests 1-6 are returned after 5 ms.

Requests 7-12 are returned in 5,005 ms.

Requests 11-18 are returned in 10 005 ms.

Requests 19-24 are returned in 15 005 ms.

Requests 25-30 are returned in 20.005 ms.

I recommend creating a function callback queue to process all of your ajax application 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>