javascript - Queue AJAX calls -

hello doing horizontal scrolling website like: http://vanityclaire.com/

however, rather having 1 large html file, after load of homepage, ajaxing in children of home, using jquery .load().

at present for-each div , ajax in ithe url sits in title. ajax returns out of order, , add more pages don't fancy spanging server 30+ http:// requests.

how synchronously ajax calls, i.e. wait first comeback before request another, or send 2 @ time.

i have been scouring, , cannot figure out need.

this 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 js:

function s_loadinginitialpages() {     var loadingitems = new array();     $(".scrollarea .scrollitem").each(function () {         if ($(this).attr('title') != '/') {             var odelem = $(this);             loadingitems.push(odelem);             //alert('test');         }     });      (i = 0; < loadingitems.length; i++) {         // title attribute url         var ajaxurl = loadingitems[i].attr("title") + '?ajaxpagecontent=';         $(loadingitems[i]).load(ajaxurl);      } } 

is there plugin can keep adding functions queue, , let handle it?

the trick use callbacks. make 1 ajax call , on success callback make next one.

to add them queue , have wrapper around sends them 1 one.

i wrote 1 few days ago. i'll show implementation in second.

// buffer class. has public append method expects kind of task. // constructor expects handler method takes ajax task // , callback. buffer expects handler deal ajax , run // callback when it's finished function buffer(handler) {     var queue = [];      function run() {         var callback = function () {              // when handler says it's finished (i.e. runs callback)              // check more tasks in queue , if there run again              if (queue.length > 0) {                   run();              }         }         // give first item in queue & callback handler         handler(queue.shift(), callback);     }       // push task queue. if queue empty before task pushed     // run 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 loads task.url task.item , calls callback  // when finished function taskhandler(task, callback) {     $(task.item).load(task.url, function() {         // call option callback task         if (task.callback) task.callback();         // call buffer callback.         callback();     }); }  // create buffer object taskhandler var buffer = new buffer(taskhandler);  (i = 0; < loadingitems.length; i++) {     // title attribute url     var ajaxurl = loadingitems[i].attr("title") + '?ajaxpagecontent=';     buffer.append(new task(loadingitems[i], ajaxurl)); } 

apologies wall of code. implement own task , handler. buffer work long handler calls second argument (the callback) when it's finished handling task.

then pass task , handler. handler ajax , calls callback buffer when ajax returns.

for specific example if loading takes long time take long time load 30. point of ajax have server stuff in parallel.

a far better solution in case make 30 requests , catch results , make sure results ajax calls appended dom in order. involves using $.ajax , adding keeping track of order somehow.

that way server fast can , can server in order once it. alternatively if things doing fast queuing them in buffer has no penalty.