Jquery AJAX請求加載兩次

我正在構建一個無限滾動，當滾動條到達頁面底部時，將從數據庫中提取結果。除了一件小事外，這一切都很好。如果我快速向下滾動，它會兩次獲取結果，就像該函數執行兩次一樣。Jquery AJAX請求加載兩次

這裏是我的jQuery代碼：

$(window).scroll(function() { 
    if($(window).scrollTop() == $(document).height() - $(window).height()) { 
     var ID = $('.stbody:last').attr('id').match(/stbody(\d+)/)[1]; 
     $('#loader').show(); 
     $.ajax({ 
      url: "ajax_loadmore.php?lCom=" + ID, 
      success: function (result) { 
       if(result) { 
        $('#moreComments').append(result); 
        $('#loader').hide(); 
       } else { 
        $('#loader').hide(); 
       } 
      } 
     }); 
    } 
});

來源

2012-07-10 Martin Forsstedt

Javascript is _somewhat_ single threaded;你是否嘗試過簡單地標記一個標誌來指示已經調用了內容的ajax請求，從而簡單地退出？ – Tejs 2012-07-10 14:05:44

作爲除了@JamWaffles回答：

你可能只是return;退出，而不是調用request.abort();功能。否則，您將針對相同的數據對您的服務器進行兩次AJAX請求=不必要的負載。然而，您應該在成功和錯誤回調中用request = null;重置請求對象。

PS。會發布這個評論，但我不能。

來源

2012-07-10 14:25:32

你的AJAX請求最有可能排隊後面彼此，因爲他們是異步，即使JavaScript的本身大多是單線程的。

您可以使用abort()方法確保一次只運行一個請求。您需要分配由$.ajax()返回給一個變量jqXHR對象：

var request; 

$(window).scroll(function() { 
    if($(window).scrollTop() == $(document).height() - $(window).height()) { 
     var ID = $('.stbody:last').attr('id').match(/stbody(\d+)/)[1]; 
     $('#loader').show(); 

     // Abort any currently executing request 
     if(request) { 
      request.abort(); 
     } 

     // Make a new request 
     request = $.ajax({ 
      url: "ajax_loadmore.php?lCom=" + ID, 
      success: function (result) { 
       if(result) { 
        $('#moreComments').append(result); 
        $('#loader').hide(); 
       } else { 
        $('#loader').hide(); 
       } 
      } 
     }); 
    } 
});

abort()是XMLHttpRequest object的原生功能，但它是由jQuery的jqXHR對象公開，因此可稱爲如常。

來源

2012-07-10 14:10:09 Bojangles

Thnx！這有幫助。我確實將它與下面的答案結合起來，以獲得更快的結果。我現在確實有另外一個問題，那就是它在Firefox中出於某種原因無法正常工作。它適用於IE 9，Chrome和Safari ..任何已知的jQuery與Firefox的問題？ – 2012-07-10 15:12:58

你是否檢查過FF的調試控制檯是否有錯誤（或者如果你安裝了Firebug的話）？ – Bojangles 2012-07-10 17:23:03

Jquery AJAX請求加載兩次

回答

相關問題