title: infinite scroll - how to delay the ajax request?
body: <p>I have a pretty simple script that works fine. However, i want to delay the appending of new results for 3 seconds, to avoid over-loading the server. So, when you reach the end of the page, a loading image should be displayed for 3 seconds, and <strong>only after that</strong>, the ajax request should be made. </p>
  
  <p>How do i make the "delay"? </p>
  
  <p>Here is the script:</p>
  
  <pre><code>$(window).scroll(function(){
      if($(window).scrollTop() == $(document).height() - $(window).height()){
           var lastID = $('div.row-details').last().attr("id");
  
           $('div#loadmoreajaxloader').show();
  
           $.ajax({url: "/projects.php?lastID=" + lastID,
              success: function(html){
                  if(html){
                         $("#maintable").append(html);
                         $('div#loadmoreajaxloader').hide();
                   }else{
                         $('div#loadmoreajaxloader').html('&lt;center&gt;No more posts to show.&lt;/center&gt;');
                     }
                }
             });
        } 
  });
  </code></pre>