jQuery - show loading image only if ajax call takes more than one second?

Question

Is it possible to show the \"Loading..\" animation only if the ajax call takes more than say, one second? Some of my ajax calls are pretty fast but I still see the loading i

Answer 1

You should put your code in a timer:

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

You could use a setTimeout().

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