How to know the number of active ajax requests with jQuery?

To do the task you want you have available ajaxStop():

Description:

Register a handler to be called when all Ajax requests have completed.

Also including the start of the load, the code would look something like this:

$(document).ajaxStart(function() {
  $('.loading').show();
});
$(document).ajaxStop(function() {
  $('.loading').hide();
});

I have been investigating in the jQuery code the use of jQuery.activeand it should report the number of connections that are unfinished, but it depends on the place and/or moment in which you access that property , it will contain what you expect or not since its value is decremented at the end of the event done, so if you try to access that value during the execution of a callbackde doneyou will not have the updated value (for example).

By the way, to keep accounts, make sure all AJAX requests are attached to document:

As of jQuery 1.9, all the handlers for the jQuery global Ajax events , including those added with the .ajaxStart()method, must be attached to document.

Edit: I have developed a proof of concept in which you can check that my proposal works correctly:

/* Eventos de comienzo y final con cambios de color */
$(document).ajaxStart(function() {
  console.log("Inicio");
  $('.loading').show();
  $('body').addClass('rojo');
});
$(document).ajaxStop(function() {
  console.log("Fin");
  $('.loading').hide();
  $('body').removeClass('rojo');
});
/* Llamadas Ajax al pulsar el texto */
var url = 'https://jsonplaceholder.typicode.com/posts/';
$('#pruebas').on('click', function() {
  $.when(
    $.get(url + '1', function(data) {
      console.log("Fin 1. Quedan: " + $.active);
    }),
    $.get(url, function(data) {
      console.log("Fin 2. Quedan: " + $.active);
    }),
    $.get(url + '3', function(data) {
      console.log("Fin 3. Quedan: " + $.active);
    })
  ).then(function() {
    console.log("Then. Quedan: " + $.active);
  });
});

.loading {
  display: none;
}
.rojo {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pruebas">Pulse para iniciar las pruebas</div>
<div class="loading">Cargando</div>

You can also see what I said. During the execution of the event success/donethe counter has not yet been decremented, so the last one will see a value of $.active1, instead of 0, even within the .when()final block.

You could do the following:

• Just before firing the event association:change, using the .on()subscribe to events method ajaxStartandajaxStop
• When ajaxStopit fires, you use .off()to unsubscribe.

For example:

// Attach to ajax events
$(document)
  .on('ajaxStart', onAjaxStart)
  .on('ajaxStop', onAjaxStop);

$('body').trigger('association:change');

// Hoisted functions

function onAjaxStart() {
  $('.loading').show();
}
function onAjaxStop() {
  $('.loading').hide();
  $(document)
    .off('ajaxStart', onAjaxStart)
    .off('ajaxStop', onAjaxStop);
}

PD1 : If $.ajax()o $.ajaxSetup()is called with the option global: false, events ajaxStartand ajaxStopwill not be fired.

PD2 : Since you use events to trigger actions, you could create a new event (eg: loader:ajax), to automatically display the loader.

Finally I have solved it in another way, although the option of the ajaxStart/ajaxStop events is also quite interesting.

Using the jQuery.when().then(); I can reach the same end that I was looking for, and for my taste, in a much cleaner way than I tried before.

  $('body').on('association:change', function () {

        $('.loading').show(); // Aquí empezamos la animación.

        $.when(
            $.get(updateUrl1, function(data)) { // Primer elemento de tipo "deferred"
                 // some code here
                 $obj1.html(data);
                 // some code here
            }),
            $.get(updateUrl2, function(data)) { // Segundo elemento de tipo "deferred"
                 // some code here
                 $obj2.html(data);
                 // some code here
            }),
            $.get(updateUrl3, function(data)) { // Tercer elemento de tipo "deferred"
                 // some code here
                 $obj3.html(data);
                 // some code here
            })
        ).then(function(){
            $('.loading').hide();
        });

  });

It is not the solution that we were looking for at first, but it adapts quite well to the expected result.