javascript - ajaxSend 绑定(bind)然后 2 个异步 $.get 请求

Question

我有一个简单的页面，绑定(bind)了 ajaxSend 事件。当它触发一个新类时，“ajax-loading”附加到一个特定的元素。第二个绑定(bind)用于 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('');
    });

Answer 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('');
});