排序ajax请求
我发现我有时需要迭代一些集合，并为每个元素进行ajax调用。 我希望每个调用都能在返回到下一个元素之前返回，这样我就不会用请求爆炸服务器 - 这往往会导致其他问题。 我不想将异步设置为false并冻结浏览器。
通常这包括设置某种迭代器上下文，我会在每次成功回调时执行一次。 我认为必须有一种更简洁的方式？
有没有人有一个聪明的设计模式，如何整齐地通过一个集合为每个项目制作Ajax调用？
jQuery 1.5+
我开发了一个$.ajaxQueue()插件，该插件使用$.Deferred ， .queue()和$.ajax()还返回一个在请求完成时解析的promise。
/*
* jQuery.ajaxQueue - A queue for ajax requests
*
* (c) 2011 Corey Frang
* Dual licensed under the MIT and GPL licenses.
*
* Requires jQuery 1.5+
*/
(function($) {
// jQuery on an empty object, we are going to use this as our Queue
var ajaxQueue = $({});
$.ajaxQueue = function( ajaxOpts ) {
var jqXHR,
dfd = $.Deferred(),
promise = dfd.promise();
// queue our ajax request
ajaxQueue.queue( doRequest );
// add the abort method
promise.abort = function( statusText ) {
// proxy abort to the jqXHR if it is active
if ( jqXHR ) {
return jqXHR.abort( statusText );
}
// if there wasn't already a jqXHR we need to remove from queue
var queue = ajaxQueue.queue(),
index = $.inArray( doRequest, queue );
if ( index > -1 ) {
queue.splice( index, 1 );
}
// and then reject the deferred
dfd.rejectWith( ajaxOpts.context || ajaxOpts,
[ promise, statusText, "" ] );
return promise;
};
// run the actual query
function doRequest( next ) {
jqXHR = $.ajax( ajaxOpts )
.done( dfd.resolve )
.fail( dfd.reject )
.then( next, next );
}
return promise;
};
})(jQuery);
jQuery 1.4
如果您使用jQuery 1.4，您可以利用空对象上的动画队列为您的ajax元素请求创建自己的“队列”。
你甚至可以将它分解成你自己的$.ajax()替代品。 这个插件$.ajaxQueue()为jQuery使用标准的'fx'队列，如果队列尚未运行，它将自动启动第一个添加的元素。
(function($) {
// jQuery on an empty object, we are going to use this as our Queue
var ajaxQueue = $({});
$.ajaxQueue = function(ajaxOpts) {
// hold the original complete function
var oldComplete = ajaxOpts.complete;
// queue our ajax request
ajaxQueue.queue(function(next) {
// create a complete callback to fire the next event in the queue
ajaxOpts.complete = function() {
// fire the original complete if it was there
if (oldComplete) oldComplete.apply(this, arguments);
next(); // run the next query in the queue
};
// run the query
$.ajax(ajaxOpts);
});
};
})(jQuery);
使用示例
所以，我们有一个<ul id="items"> ，它有一些<li>我们想要复制（使用ajax！）到<ul id="output">
// get each item we want to copy
$("#items li").each(function(idx) {
// queue up an ajax request
$.ajaxQueue({
url: '/echo/html/',
data: {html : "["+idx+"] "+$(this).html()},
type: 'POST',
success: function(data) {
// Write to #output
$("#output").append($("<li>", { html: data }));
}
});
});
jsfiddle演示 - 1.4版本
使用延期承诺的快速小解决方案。 虽然这使用jQuery的$.Deferred ，但其他任何人都应该这样做。
var Queue = function () {
var previous = new $.Deferred().resolve();
return function (fn, fail) {
return previous = previous.then(fn, fail || fn);
};
};
用法，调用来创建新的队列：
var queue = Queue();
// Queue empty, will start immediately
queue(function () {
return $.get('/first');
});
// Will begin when the first has finished
queue(function() {
return $.get('/second');
});
请参阅示例并排比较异步请求。
你可以把所有的复杂功能都包含进一个函数中，使得一个简单的调用看起来像这样：
loadSequantially(['/a', '/a/b', 'a/b/c'], function() {alert('all loaded')});
下面是一个粗略的草图（工作示例，除了ajax调用）。 这可以修改为使用类似队列的结构而不是数组
// load sequentially the given array of URLs and call 'funCallback' when all's done
function loadSequantially(arrUrls, funCallback) {
var idx = 0;
// callback function that is called when individual ajax call is done
// internally calls next ajax URL in the sequence, or if there aren't any left,
// calls the final user specified callback function
var individualLoadCallback = function() {
if(++idx >= arrUrls.length) {
doCallback(arrUrls, funCallback);
}else {
loadInternal();
}
};
// makes the ajax call
var loadInternal = function() {
if(arrUrls.length > 0) {
ajaxCall(arrUrls[idx], individualLoadCallback);
}else {
doCallback(arrUrls, funCallback);
}
};
loadInternal();
};
// dummy function replace with actual ajax call
function ajaxCall(url, funCallBack) {
alert(url)
funCallBack();
};
// final callback when everything's loaded
function doCallback(arrUrls, func) {
try {
func();
}catch(err) {
// handle errors
}
};
下一篇: jQuery .when troubleshooting with variable number of arguments