Question

我正在广泛使用.load()来获取AJAX内容。它很棒，但如果它做得多一点我想要它：

如果为了响应用户操作，我在同一个div上多次调用.load()，我最终可能会在div中输入错误的数据。当较早的请求回调比较晚的请求慢时会发生这种情况。我需要一些东西来拒绝过时的回调
如果.load()向目标添加了CSS类，并且在回调完成后删除了该类，那将会很不错。

是否有提供此类功能的jQuery库或插件？或者可以用很少的行来完成它不值得插件？

Answer 1

创建自己的插件可以非常轻松地防止多个并发请求。这是一个简单的插件，拦截AJAX调用，保留未完成的请求列表，并在新的请求进入时中止它们：

$.fn.preventConcurrentAjax = function() {
    return this.ajaxSend(function(e, jqXHR, settings) {
        $.each($(this).data("pca-pending") || [], function() { this.abort(); });
        $(this).data("pca-pending", [jqXHR]);
    });
};

您可以轻松地对此进行扩展，以便在请求完成时取消先前尚未完成的请求，而不是在排队时;为此，您还需要为每个请求存储时间戳。

您还可以使用jQuery的.ajaxStart()和.ajaxStop()来轻松自动切换“加载”类，例如：

$.fn.loadingOnAjax = function() {
    var $self = $(this);
    return this.ajaxStart(function() { $self.addClass("loading"); })
               .ajaxStop(function() { $self.removeClass("loading"); });
};

Answer 2

没有插件就可以轻松完成：

function ajaxLoad() {
    $('#result')
        .addClass('isLoading')
        .load('ajax/test.html', function() {
            $('#result').removeClass('isLoading');
        });
}

要停止多个ajax调用，请检查：

if( ! $('#result').hasClass('isLoading') ) {
    ajaxLoad();
}

Answer 3

您可以使用xhr对象取消先前的请求。

( function load( ) {
    var xhr;

    return function( url ) {

        // abort previous request
        if( xhr && xhr.readystate != 4 ) { xhr.abort(); }

        xhr = $.get(url, function (data) {
            $('#id').html(data);
        });
    };
}());

load( url );

jQuery.load（）包装器来管理多个请求和“.loading”CSS类

3 个答案: