如何在无限滚动实现中发出一个ajax请求而不是多个请求答案

【问题标题】：How to make one ajax request instead of multiple on endless scroll implementation如何在无限滚动实现中发出一个ajax请求而不是多个请求
【发布时间】：2016-11-27 14:23:00
【问题描述】：

当用户滚动到底部时，我将每隔 10 个出版物加载到提要中。问题是 ajax 发送多个请求，因为此代码检测到多个滚动到底部事件。考虑到用户向下滚动，如何发出一个 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);          
            }
        });
    }
});

【问题讨论】：

您希望函数只触发一次吗？还是每次滚动到底部时一次？
@user2085143 显然每次

标签： javascript jquery ajax

【解决方案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;
        });
    }
});

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：

【解决方案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");
    });
  }
});

【讨论】：