jQuery“queue”(ajaxQueue插件) - 如何清除?

时间:2012-07-24 12:12:38

标签: jquery

Corey Frang在stackoverflow上发布了一个有用的插件,用于排队ajax请求。就我而言,它可以用“块”加载大量数据集,以最大限度地减少用户感知的缓慢。它完美地工作,除非在ajax请求队列完成之前触发了分页事件,在这种情况下,保存已加载对象的容器将清除,但排队的请求将继续运行,从而导致不希望的行为。我想要的是找到/学习清除所有现有请求的队列的方法。开发人员发布了一种方法来执行此操作,但是,它似乎不起作用。我已经尝试在jQuery网站上阅读.queue,但我似乎无法理解如何使这项工作。我已经花了很多时间试图弄清楚这个问题,但也许我对jQuery的一些更复杂的方面缺乏了解,这让我筋疲力尽。希望那些对jQuery更熟悉的人可以帮助:)(标记建议的内容并且似乎不适用于某些“!!!!!”)

/*
* 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 )
            .then( next, next )
            .done( dfd.resolve )
            .fail( dfd.reject );
    }

    return promise;
};

// !!!!!!!!!!!!!!!!!
// this is what the developer suggested on his website in the comments section
// ... but it does not appear to work
$.ajaxQueue.stop = function( clear ) { ajaxQueue.stop( clear ); }

})(jQuery);

3 个答案:

答案 0 :(得分:1)

从我看到的问题似乎是:

var ajaxQueue = $({});

ajaxQueue只是一个空对象,要停止使用你需要指向jQuery插件的对象

ajaxQueue.stop = function( clear ) { $.ajaxQueue.stop( clear ); }

,或者只是使用:

$.ajaxQueue.stop( clear );

答案 1 :(得分:1)

我将此函数添加到ajaxQueue代码中。它可能效率不高,但它通过清除队列来完成工作:

if (ajaxOpts=='clear'){
    ajaxQueue.clearQueue();
    return promise;
}

答案 2 :(得分:1)

感谢您帮助我解决问题的努力。然而..

我找到了一个更好的ajax队列插件 - Oleg Podolsky的“ajaxq”,如果你需要排队ajax请求(以及正确清除队列的能力),我推荐使用它。

添加到队列:

ajaxq('queue_name', {
    // standard $.ajax options
});

停止/清除队列:

ajaxq('queue_name');

插件:

/*
 * jQuery AjaxQ - AJAX request queueing for jQuery
 *
 * Version: 0.0.1
 * Date: July 22, 2008
 *
 * Copyright (c) 2008 Oleg Podolsky (oleg.podolsky@gmail.com)
 * Licensed under the MIT (MIT-LICENSE.txt) license.
 *
 * http://plugins.jquery.com/project/ajaxq
 * http://code.google.com/p/jquery-ajaxq/
 */

jQuery.ajaxq = function (queue, options)
{
    // Initialize storage for request queues if it's not initialized yet
    if (typeof document.ajaxq == "undefined") document.ajaxq = {q:{}, r:null};

    // Initialize current queue if it's not initialized yet
    if (typeof document.ajaxq.q[queue] == "undefined") document.ajaxq.q[queue] = [];

    if (typeof options != "undefined") // Request settings are given, enqueue the new request
    {
        // Copy the original options, because options.complete is going to be overridden

        var optionsCopy = {};
        for (var o in options) optionsCopy[o] = options[o];
        options = optionsCopy;

        // Override the original callback

        var originalCompleteCallback = options.complete;

        options.complete = function (request, status)
        {
            // Dequeue the current request
            document.ajaxq.q[queue].shift ();
            document.ajaxq.r = null;

            // Run the original callback
            if (originalCompleteCallback) originalCompleteCallback (request, status);

            // Run the next request from the queue
            if (document.ajaxq.q[queue].length > 0) document.ajaxq.r = jQuery.ajax (document.ajaxq.q[queue][0]);
        };

        // Enqueue the request
        document.ajaxq.q[queue].push (options);

        // Also, if no request is currently running, start it
        if (document.ajaxq.q[queue].length == 1) document.ajaxq.r = jQuery.ajax (options);
    }
    else // No request settings are given, stop current request and clear the queue
    {
        if (document.ajaxq.r)
        {
            document.ajaxq.r.abort ();
            document.ajaxq.r = null;
        }

        document.ajaxq.q[queue] = [];
    }
}