我正在使用队列技术中提到的ajaxQueue:
// 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 );
}
// Run the next query in the queue.
next();
};
// Run the query.
$.ajax( ajaxOpts );
});
};
我还有一个函数可以进行Ajax调用并将结果附加到一个div中(简化版):
function ajaxCall() {
$.ajaxQueue({
type: "POST",
url: myURL,
async: true,
cache: false,
success: function( result ) {
$('#divID').append($('<div/>').html($(result).html()).fadeIn(200));
}
});
}
然后在点击事件中,我通过ajax调用进行循环(简化):
$("#btn").on("click", function() {
// ( ??? ) Dequeue the ajaxQueue
$('#divID').html(''); // Clear current results
for(var i=0; i<15; i++) {
ajaxCall();
}
});
问题如果用户在队列仍在运行时点击链接,则会添加一个新的ajax调用队列,导致结果超出预期。我需要在单击之前清除队列,然后再开始新的循环。
这里是jsFiddle演示。 非常感谢您的任何建议。