3

¿Cómo puedo conocer el número de peticiones ajax activas usando jQuery?

Tenía entendido que jQuery.active daba ese valor, pero no está funcionando.

En un punto de una aplicación, disparo un evento personalizado con jQuery:

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

Varios procesos están a la espera de dicho evento, y cada uno realiza una petición ajax por su cuenta, lo que puede resultar en varias peticiones simultáneas. Para indicar al usuario que el sistema se encuentra realizando operaciones, muestro una animación de tipo "loading". Cuando la última de las peticiones acaba, debe ocultar esta animación. Hasta el momento, creía que con

if ($.active < 1) {
    $('.loading').hide();
}

podría conseguirlo. ¿Hay alguna forma de conocer el número de peticiones ajax no finalizadas con jQuery?

1
  • Gracias @OscarGarcia! Finalmente la solución vino de la mano de la respuesta que he publicado, no la he podido marcar como correcta hasta hoy por limitaciones de la plataforma. No obstante tu respuesta resultó muy útil y aclaratoria y por ello tiene un voto positivo por mi parte.
    – Muriano
    Commented el 2 feb. 2017 a las 9:31

3 respuestas 3

5

Para hacer la tarea que deseas tienes disponible ajaxStop():

Description:

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

Incluyendo también el inicio de la carga, el código quedaría algo así:

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

He estado investigando en el código de jQuery el uso de jQuery.active y debería informar del número de conexiones que están sin finalizar, pero depende del lugar y/o momento en el que accedas a esa propiedad contendrá lo que esperas o no ya que se decrementa su valor al final del evento done, por lo que si intentas acceder a ese valor durante la ejecución de un callback de done no tendrás el valor actualizado (por ponerte un ejemplo).

Por cierto, para que se lleven bien las cuentas, asegúrate de que todas las peticiones AJAX están adosadas a 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.


Edito: He desarrollado una prueba de concepto en la que puedes comprobar que funciona correctamente mi propuesta:

/* 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>

También podrás ver lo que dije. Durante la ejecución del evento success/done el contador aún no ha sido decrementado, por lo que el último verá un valor de $.active de 1, en vez de 0, incluso dentro del bloque .when() del final.

3
  • Algo importante es que si $.ajax() o $.ajaxSetup() es llamado con la opción global: false, los métodos .ajaxStart() y .ajaxStop() no será ejecutados.
    – Marcos
    Commented el 31 ene. 2017 a las 13:07
  • Lo siento, no me sirve. No todas las peticiones ajax que se realizan en el script activan la animación de loading.
    – Muriano
    Commented el 31 ene. 2017 a las 13:12
  • Es probable que sea porque las estás adosando a otro elemento del DOM que no sea document. Se podría depurar el problema agregando código de depuración a la biblioteca jQuery alrededor de las líneas que te marqué en mi respuesta, pero no puedo ayudarte más sin el código que genera las consultas Ajax. PD: Gracias por el detalle @Marcos Gallardo, más detalles AQUÍ. Commented el 31 ene. 2017 a las 13:34
1

Podrías hacer lo siguiente:

  • Justo antes de disparar el evento association:change, utilizando el método .on() suscribirte a los eventos ajaxStart y ajaxStop
  • Cuando ajaxStop se dispare, utilizas .off() para de-suscribirte.

Así por ejemplo:

// 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: Si $.ajax() o $.ajaxSetup() es llamado con la opción global: false, los eventos ajaxStart y ajaxStop no será disparados.

PD2: Ya que utilizas eventos para disparar acciones, podrías crear un nuevo evento (eg: loader:ajax), para mostrar automáticamente el loader.

0

Finalmente lo he solucionado por otra vía, aunque la opción de los eventos ajaxStart/ajaxStop es también bastante interesante.

Usando el jQuery.when().then(); puedo llegar al mismo fin que iba buscando, y para mi gusto, de forma bastante más limpia de lo que intentaba antes.

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

  });

No es la solución que buscábamos en un principio, pero se adapta bastante bien al resultado esperado.

4
  • 1
    Es muy llamativo que publiques una respuesta con parte del código omitido en la pregunta inicial. Creo que si hubieses agregado esta parte del código podrías haber recibido mejores respuestas (o mas adecuadas). En la pregunta has detallado que "Varios procesos están a la espera de dicho evento", en tu respuesta, solo se puede visualizar un solo listener.
    – Marcos
    Commented el 31 ene. 2017 a las 20:14
  • @MarcosGallardo +1, con código hubiera sido más fácil reproducir el error y corregirlo :/ PD: He editado mi respuesta con una prueba de concepto aplicando mi respuesta a tu código (con otro evento más sencillo de reproducir). Commented el 31 ene. 2017 a las 21:20
  • @MarcosGallardo no ha sido una omisión intencionada. Con el nuevo planteamiento ha surgido. Distinta ejecución, mismo resultado.
    – Muriano
    Commented el 1 feb. 2017 a las 7:30
  • 1
    @Muriano, entiendo que has modificado el funcionamiento para solucionarlo, pero esta respuesta no soluciona el planteo de la pregunta, ya que si tuvieras "Varios procesos están a la espera de dicho evento" aún tendrías el problema.
    – Marcos
    Commented el 1 feb. 2017 a las 13:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.