JQuery - показывать загружаемое изображение только в том случае, если вызов ajax занимает более одной секунды?

Можно ли показать анимацию "Загрузка.." только в том случае, если вызов ajax занимает больше, чем сказать, на одну секунду? Некоторые из моих вызовов ajax довольно быстры, но я до сих пор вижу значок загрузки за долю секунды, прежде чем он исчезнет. Может быть, это только я, но я нахожу это отвлекающим. Я вообще не хочу его удалять. Какие-либо предложения? Здесь мой код -

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

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

Ответ 1

Вы должны поместить свой код в таймер:

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

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

Ответ 2

Вы можете использовать setTimeout().

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