防止堆疊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));