エンドレススクロールの実装で複数の代わりに1つのajaxリクエストを作成する方法

Question

ユーザーが下にスクロールすると、次の10のパブリケーションがすべてフィードにロードされます。問題は、このコードが複数のスクロール・トゥ・ボトム・ボトム・イベントを検出するため、ajaxが複数のリクエストを送信することです。ユーザーがさらに下にスクロールすることを考慮して、複数の代わりに1つのAjaxリクエストを作成する方法

$(window).scroll(function() { 

    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {   

     $.ajax({ 
      url: '/more/', 
      type:'GET', 
      dataType: 'json', 
      data:2, 
      success: function (data) { 
       alert(data);   
      } 
     }); 
    } 
}); 

Answer 1

はAjaxが運転中であるかどうかを確認するために、ロックを使用してみてください、あなたがロックを解放することができた後、AJAXを介してデータを受信するまで次のAJAX呼び出しをしません。

var lock = false; 

$(window).scroll(function() { 

if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {   

if(lock==true){ 
return; 

} 

lock = true;   

$.ajax({ 
      url: '/more/', 
      type:'GET', 
      dataType: 'json', 
      data:2, 
      success: function (data) { 
       alert(data);        
      } 
     }).always(function() { 
      lock = false; 
     }); 
    } 
}); 

Answer 2

この

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     alert("bottom!"); 
    } 
}); 

Answer 3

これを試してみてください：

$(window).scroll(function() { 
 
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) { 
 
    var jqXHR = $(document).data("jqXHR"); 
 
    if(jqXHR) { 
 
     return; 
 
    } 
 
    jqXHR = $.ajax({ 
 
     url: '/more/', 
 
     type: 'GET', 
 
     dataType: 'json', 
 
     data: 2, 
 
     success: function(data) { 
 
     alert(data); 
 
     } 
 
    }); 
 
    $(document).data("jqXHR", jqXHR); 
 
    jqXHR.always(function(){ 
 
     $(document).removeData("jqXHR"); 
 
    }); 
 
    } 
 
});