jquery - jQuery.load() 包装器来管理多个请求和“.loading” CSS 类

Question

我.load()广泛用于 AJAX 内容。这很棒，但如果它做得更多，我会喜欢它：

1. 如果为了响应用户操作，我.load()对同一个 div 进行了多次调用，我最终可能会在 div 中得到错误的数据。当较早的请求的回调速度比较晚的请求慢时，就会发生这种情况。我需要一些东西来拒绝过时的回调

2. 如果.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 );