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

mostrar cargando en php

Question

¿Es posible mostrar la animación "Cargando .." solo si la llamada ajax toma más de un segundo? Algunas de mis llamadas ajax son bastante rápidas, pero aún veo el ícono de carga durante una fracción de segundo antes de que desaparezca. Puede que sea solo yo, pero me distrae. Aunque no quiero eliminarlo por completo. ¿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

Debes poner tu código en un temporizador:

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

Podrías usar un setTimeout() .

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