Question

当用户滚动到底部时，我将每个下一个10版本加载到Feed。问题是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);          
            }
        });
    }
});

Answer 1

试试这个

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

Answer 2

使用锁来检查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 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");
    });
  }
});

如何在无限滚动实现中创建一个ajax请求而不是多个

3 个答案: