jQuery: ¿muestra la imagen de carga solo si la llamada ajax tarda más de un segundo?

Question

¿Es posible mostrar la animación "Cargando ..." solo si la llamada ajax requiere más de un segundo? Algunas de mis llamadas ajax son bastante rápidas, pero sigo viendo el icono de carga durante una fracción de segundo antes de que desaparezca. Tal vez sea solo yo, pero me parece una distracción. No obstante, no quiero eliminarlo del todo. ¿Alguna sugerencia? Aquí está mi código -

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

<div id="loading"> 
    <img alt="Loading, please wait.." src="/content/images/spinner.gif" /> 
</div> 

Answer 1

Usted debe poner su código en un contador:

var $loader = $('#loading'), timer; 

$loader.hide() 
    .ajaxStart(function() 
    { 
     timer && clearTimeout(timer); 
     timer = setTimeout(function() 
     { 
      $loader.show(); 
     }, 
     1000); 
    }) 
    .ajaxStop(function() 
    { 
     clearTimeout(timer); 
     $loader.hide(); 
    }); 

Answer 2

Se puede usar un setTimeout().

var loadingTimeout; 
$('#loading').hide() 
.ajaxStart(function() { 
    var element = $(this); 
    loadingTimeout = setTimeout(function() { 
     element.show(); 
    }, 1e3); 
}) 
.ajaxStop(function() { 
    clearTimeout(loadingTimeout); 
    $(this).hide(); 
});