title: delay the showing of a ajax loading gif using jQuery
body: <p>What is the best way to put a delay on the showing of a ajax-loader gif. When I click a button the loader gif shows and hides even if the time taken is a few hundred milli-seconds, this gives the browser a kind of flicker. What I want is to say only show the gif if it takes more than say 1000 milli-seconds to complete the ajax request. </p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
       $(document).ready(function() {
           $('#loader').hide();
           $('#btnGetPeople').click(function() {
              $('#loader').show();
               $.getJSON("/User/GetName/10",
                  null,
                  function(data) { showPerson(data); });
           });
       });
  
       function showPerson(data) {
           alert(data);
           $('#loader').hide();
       }
  &lt;/script&gt;
  </code></pre>
  
  <p>My loader div contains....</p>
  
  <pre><code>&lt;div id="loader"&gt;&lt;img alt="" src="/content/ajax-loader.gif" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>What is the best technique to achieve this?</p>