Retrasar la ruleta de carga mientras se hace peticiones Ajax en jQuery

Question

estoy usando la siguiente maqueta para mostrar mi carga spinner mientras se hace peticiones AJAX en mi código jQuery:

jQuery.ajaxSetup({ 
beforeSend: function() { 
    $('#loader').show() 
}, 
complete: function(){ 
    $('#loader').hide() 
}, 
success: function() { 
    $('#loader').hide() 
} 
}); 

Este código funciona perfectamente bien para mí!

Sólo hay un problema:

Algunas solicitudes son sólo muy simple y rápido, por lo que el spinner carga se acaba de mostrar un par de millisecs. Eso por supuesto no es muy bonito.

Así que traté de usar setTimeout() para mostrar la aguja de carga ligeramente retrasada. Quiero que aparezca solo si las solicitudes AJAX toman al menos, digamos 100ms, pero no funcionó.

Necesito un código para retrasar la carga de la ruleta como expliqué anteriormente, por lo que SOLO aparece al hacer solicitudes AJAX "más largas".

Answer 1

La solución común que he visto es mantener la pulsación durante uno o dos segundos, incluso si la solicitud finaliza más rápido que eso. Algo así como:

var loaded = false; 
var throbbed = false; 

function checkComplete(){ 
    if(loaded && throbbed){ 
     $("#loader").hide(); 
    } 
} 

function requestComplete(){ 
    loaded = true; 
    checkComplete(); 
} 

jQuery.ajaxSetup({ 
beforeSend: function() { 
    $('#loader').show(); 
    setTimeout(function(){ 
     throbbed = true; 
     checkComplete(); 
    }, 500); 

}, 
complete: requestComplete, 
success: requestComplete 
}); 

Obviamente esto tiene un compromiso de hacer las cosas más lentas a expensas de mirar bastante, por lo que es el caso que dependen de si desea o no tomar ese golpe. Si es algo que se usa todo el tiempo, es mejor que aceptes lo feo. Si es algo que ocurre de vez en cuando, los usuarios no notarán 500 mil extra.

Answer 2

Éste es cómo ha solucionado la funcionalidad mencionada

var loading; 
    $("#loader").hide(); 
    jQuery.ajaxSetup({ 
     beforeSend: function() { 
      loading= setTimeout("$('#loader').show()", 300); 
     }, 
     complete: function(){ 
      clearTimeout(loading); 
      $("#loader").hide(); 
     }, 
     success: function() { 
      alert("done"); 
     } 
    }); 

Answer 3

Esto debería funcionar:

var timeout; 

jQuery.ajaxSetup({ 
beforeSend: function() { 
    timeout = window.setTimeout(function() { 
     timeout = null; 
     $('#loader').show(); 
    }, 100); 
}, 
complete: function(){ 
    if (timeout) { 
     window.clearTimeout(timeout); 
     timeout = null; 
    } 
    $('#loader').hide() 
}, 
success: function() { 
    // No need to do anything here since complete always will be called 
} 
}); 

Ahora tiene que mejorar esta un poco si estás disparando varias pedido al mismo tiempo, pero espero que entiendas la imagen.

Answer 4

Responda ahora porque me encuentro con el mismo problema y estas respuestas me dan parte de la solución. Para evitar iniciar spinner después de que se complete la solicitud de ajax porque el tiempo de espera es más amplio que el script de ejecución, necesita una marca de verificación arriba/abajo, es muy simple y me resulta útil.

var m = $('.modal-ajax'); 
var run = false; // global scope is necessary 
m.hide(); // if isn't hidden in css 

jQuery.ajaxSetup({ 
    beforeSend: function() { 
     run = true; // up flag   
     d = setTimeout(function(){ 
      if(run) // is ajax executing now? 
       m.show(); 
     },100); // is trigged only for NO fast response 
    }, 
    complete: function(){ 
     m.hide(); 
     run = false; // down flag     
    }, 
    success: function() {    
    // do stuff 
    } 
}); 

Answer 5

Esta es una vieja pregunta pero he encontrado un enfoque mucho más agradable y elegante. jQuery expone una variable $.active que es el número de solicitudes ajax actualmente activas. El valor de esto aumenta antes de ajaxSend y disminuye después de ajaxComplete.

Con esto en mente, todo lo que necesitamos hacer es mostrar la ruleta cuando ajaxSend se dispara y $.active == '1' y ocultar la ruleta cuando se dispara y ajaxComplete$.active == '1'. Aquí está mi código que actualmente funciona perfectamente.

$(document).ajaxSend(function(event, request, settings) { 
    $.active == '1' ? $('#spinner').show() : ''; 
}); 

$(document).ajaxComplete(function(event, request, settings) { 
    $.active == '1' ? $('#spinner').hide() : ''; 
}); 

Espero que esto ayude a alguien.