spanging the server with 30+ http:// requests.
How do I synchronously do the AJAX calls, i.e. 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?
解决方案
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.
这篇关于排队 AJAX 调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
