Question

I have a simple page, with binding ajaxSend event. When it fires a new class “ajax-loading” appends to a specific element. And second bind is for ajaxComplete, when it fires, a class “ajax-loading” removes from element.
And the problem is, when i have two asynchronous ajax requests.

They starts fast and seems like immediately, but when first ajaxComplete fired, a class “ajax-loading” is removed. although second ajax is not yet completed.

How can i keep “ajax-loading” until second ajaxComplete fired ?
The code is simple:

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

Answer 1

You could implement a counter. Instead of using a JavaScript variable, you can also attach it to the element, using .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('');
});