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 icon for a fraction of a second before it disappears. May be it's just me, but I find it distracting. I don't want to remove it altogether though. Any suggestions? Here's my code -

    $('#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

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();     });