Question

我有一个简单的页面，带有绑定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('');
    });

Answer 1

你可以实施一个计数器。您也可以使用.data()。

将其附加到元素，而不是使用JavaScript变量

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

Answer 2

我建议使用Deferred：

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

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

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

ajaxSend绑定，然后是2个异步$ .get请求

2 个答案: