Is it possible to specify time after which I can show busy indicator?

My code for busy indicator is quite simple:

jQuery.ajaxSetup( {
    beforeSend:function ()
    {
        jQuery( "#busy-indicator" ).show();
    }, plete:function ()
    {
        jQuery( "#busy-indicator" ).hide();
    }
} );

But often Ajax request is faster then appearing indicator, therefore I'd like to show it for request which take lets say at least 1 second, is it possible? Or Do you have idea how to do it?

Is it possible to specify time after which I can show busy indicator?

My code for busy indicator is quite simple:

jQuery.ajaxSetup( {
    beforeSend:function ()
    {
        jQuery( "#busy-indicator" ).show();
    }, plete:function ()
    {
        jQuery( "#busy-indicator" ).hide();
    }
} );

But often Ajax request is faster then appearing indicator, therefore I'd like to show it for request which take lets say at least 1 second, is it possible? Or Do you have idea how to do it?

• javascript
• jquery

• 2 in the beforeSend callback launch a timeout that will show your loader after a while and in the plete callback cancel the timeout and hide the loader. – yent Commented Jul 23, 2012 at 9:57

2 Answers 2

This does the trick:

var timeout; 
jQuery.ajaxSetup( {
    beforeSend:function ()
    {
        if (timeout) { clearTimeout(timeout); }
        timeout = setTimeout(function() {
            jQuery( "#busy-indicator" ).show(); 
        }, 1000);
    }, 
    plete:function ()
    {
        if (timeout) { clearTimeout(timeout); } 
        jQuery( "#busy-indicator" ).hide();
    }
});

jQuery.ajaxSetup( {
    beforeSend:function ()
    {
        $( "#busy-indicator" ).stop(1,0).hide().delay(1000).show();
    }, 
    plete:function ()
    {
        $( "#busy-indicator" ).stop(1,0).hide();
    }
});

Doesn't this also work?