jQuery.load() 包装器来管理多个请求和 ".loading"CSS 类

Question

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

1. 如果为了响应用户操作，我多次调用同一个 div 上的 .load()，我可能会在 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"); });
};