在页面滚动上加载数据并不完美

Question

我正在页面上工作，它会在到达页面末尾时加载新闻。

 $(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() -50) {
        //if ($(window).scrollTop() >= $(document).height() - 100) {
        //alert("I am loading");
        GetRecords();
    }
  });

上面的代码问题是它向服务器发送了多个请求，因为我在>=中提到if condition我尝试了一些东西，但它似乎没有正常工作。

当我使用==操作和$(window).scrollTop() == $(document).height() - $(window).height()时，它在桌面上工作正常但在移动版本中不会触发。

我有标题＆amp;页面中的页脚，我事件没有隐藏进行故障排除，但仍然无法正常工作

我可以做些什么来解决这个问题

Answer 1

我做了同样的事情，我也遇到了同样的问题。

我做的是创建一个布尔isLoading并在发送请求时将其传递给true 并且只有当您收到回复时，才将值更改为false。

之后在滚动位置测试中添加变量。

示例

var isLoading = false;   

$(window).scroll(function(e){
  var maxHeight = $(document).height();
  var position = $(this).scrollTop() + $(window).height();
  if(position >= (maxHeight - 50) && !isLoading)
  {
    loadArticles();
    isLoading = true;
  }
});

function loadArticles() {
    loadData()
    .then(data => {
      //some code here
      isLoading = false;
    });
}

Demo link of my draft