5

我正在使用示例队列中提到的 ajaxQueue，例如 Ajax Calls：

// 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 演示。任何建议都非常感谢。

4

2 回答 2

5

使用clearQueue：

ajaxQueue.clearQueue();

编辑

问题是可能仍然有一个 ajax 请求被调用。

因此，您可能希望跟踪当前请求：

currentRequest = $.ajax( ajaxOpts );

并在清除队列时中止这个：

if (currentRequest) {
    currentRequest.abort();
}

见http://jsfiddle.net/4AQ9N/6/

于 2013-05-27T14:45:49.587 回答
2

你需要

   ajaxQueue.queue("fx", []); // fx is defualt queue Name.

见演示

 success: function( result ) {
            if(num!=0){
                $('#divID').append($('<div/>').html('Result '+num).fadeIn(300));
            }
            num++;
        }

$("#btn").on("click", function(e) {
    e.preventDefault();
    if(ajaxQueue.queue().length>0){
        num = 0;
        ajaxQueue.queue("fx", []);
    }else{
        num = 1;
    }
    $('#divID').html(''); // Clear current results



    for(var i=0; i<40; i++) {
        ajaxCall();
    }

});

在这里，您可能会看到 1 个额外的输出...即最多 41 个。但这不是因为队列不起作用...当您Clear the queue已经放置了一个 ajax 调用...并等待响应时。队列完成后收到响应。

我添加了一些 num value hack 的更新代码。它会在大多数情况下工作。

于 2013-05-27T14:59:54.803 回答