ajaxSend 绑定然后 2 个异步 $.get 请求答案

【问题标题】：ajaxSend bind and then 2 async $.get requestsajaxSend 绑定然后 2 个异步 $.get 请求
【发布时间】：2011-10-30 09:40:30
【问题描述】：

我有一个简单的页面，带有绑定 ajaxSend 事件。当它触发一个新类时，“ajax-loading”会附加到一个特定的元素上。第二个绑定是针对 ajaxComplete，当它触发时，会从元素中删除一个“ajax-loading”类。问题是，当我有两个异步 ajax 请求时。

它们启动速度很快，看起来就像是立即启动，但是当第一次触发 ajaxComplete 时，会删除一个“ajax-loading”类。虽然第二个 ajax 还没有完成。

我怎样才能保持“ajax-loading”直到第二个 ajaxComplete 被触发？代码很简单：

    $('h1').bind('ajaxSend', function() {
        $(this).addClass('ajax-loading');
    }).bind('ajaxComplete', function() {
        $(this).removeClass('ajax-loading');
    });
    $('h1').click(function() {
        $.get('');
        $.get('');
    });

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

你可以实现一个计数器。除了使用 JavaScript 变量，您还可以使用 .data() 将其附加到元素。

var ajaxRequests = 0;
$('h1').bind('ajaxSend', function() {
    ajaxRequests++; //Increase counter
    $(this).addClass('ajax-loading');
}).bind('ajaxComplete', function() {
    if (--ajaxRequests == 0) { // Decrease counter by one, and check for zero
        $(this).removeClass('ajax-loading');
    }
});
$('h1').click(function() {
    $.get('');
    $.get('');
});

【讨论】：

@RusAlex 如果不必同时触发请求，这是最好的解决方案。如果请求总是相互触发，那么 pimvdb 的解决方案也是一个不错的选择。
我认为你应该检查2。
@pimvdb 不，这会在下一次破坏代码。我刚刚忍者编辑了我的答案，并添加了-- (--ajaxRequests) 让它一直工作。请注意，无论触发多少 AJAX 请求，只要它们完成，加载程序就会被删除。

【解决方案2】：

我建议使用Deferred:

$('h1').addClass('ajax-loading');

$.when($.get(''), $.get(''))
 .then(function() {
     $('h1').removeClass('ajax-loading');
 });

只有在两者都完成后才会删除它。

【讨论】：