防止堆叠AJAX请求

Question

我遇到了一个我似乎无法解决的问题。

我目前正在实现一个类似于Twitter使用的AJAX函数 - 可以在滚动上获取新帖子。

jQuery的看起来是这样的：

 $(window).scroll(function(){ 
      if($(window).scrollTop() == $(document).height() - $(window).height()){ 
       $('div#ajaxloader').show(); 
       $.ajax({ 
        url: "loader.php?lastid=" + $(".container:last").attr("id"), 
        success: function(html){ 
         if(html){ 
          $("#main").append(html); 
          $('div#ajaxloader').hide(); 
         }else{ 
          $('div#ajaxloader').html('No more posts to show.'); 
         } 
        }     
       }); 
      } 
     }); 

现在的问题;如果用户的滚动速度非常快，并且数据库正在快速运行，那么jQuery似乎不能够以足够快的速度发送正确的ID作为查询，这会导致双重帖子。

任何人都有一个好主意，如何防止这种情况？

Answer 1

试试这个：

var runningRequest = 0; 
    $(window).scroll(function(){ 
     if(runningRequest <1){ 
     if($(window).scrollTop() == $(document).height() - $(window).height()){ 
      runningRequest++; 
      $('div#ajaxloader').show(); 
      $.ajax({ 
       url: "loader.php?lastid=" + $(".container:last").attr("id"), 
       success: function(html){ 
        runningRequest--; 
        if(html){ 
         $("#main").append(html); 
         $('div#ajaxloader').hide(); 
        }else{ 
         $('div#ajaxloader').html('No more posts to show.'); 
        } 
       } 
       error: function(){runningRequest--;}     
      }); 
     } 
     } 
    }); 

Answer 2

我会设置一个布尔值，真正的权利让我的请求之前，每当请求完成我将它设置为false。然后，我将包装进行请求的代码检查该值是true还是false。我还会添加一个bool，告诉我我是否应该打扰请求 - 在请求最后一个请求是否回到空的时候没有意义（除非数据集自上次请求以来可能会发生变化）。无论哪种方式，这里是我开始的代码：

(function(global) 
{ 
    var $ = global.jQuery, 
     $win = $(global), 
     $doc = $(global.document), 
     $ajaxLoader = $('div#ajaxloader'), 
     $main = $('#main'), 
     requestInProgress = false, 
     outOfPosts = false; 

    $win.scroll(function() 
    { 
     if(! requestInProgress && 
      ! outOfPosts && 
      $win.scrollTop() === $doc.height() - $win.height() 
     ) 
     { 
      requestInProgress = true; 

      $ajaxLoader.show(); 

      $.ajax({ 
       url: 'loader.php', 
       data: { 
        lastid: $('.container:last').attr('id') 
       }, 
       success: function(html) 
       { 
        if(html) 
        { 
         $main.append(html); 
         $ajaxLoader.hide(); 
        } 
        else 
        { 
         outOfPosts = true; 
         $ajaxLoader.html('No more posts to show.'); 
        } 
       }, 
       complete: function() 
       { 
        requestInProgress = false; 
       } 
      }); 
     } 
    }); 
}(window));