Javascript 无法实现无限滚动

我试图在我的自定义列表页面上使用无限滚动。我正在尝试使用AJAX来创建它

我面临的问题是，即使我在达到屏幕70%后稍微移动鼠标，也会发出请求，这会在网页上造成巨大的负载。理想情况下，在更新工具栏HTML之前不应该这样做。然后AJAX应该加载下一个页面

要求([
“jquery”
]，函数（$）{
var下一页=“”；
var isloading=false；
var nextPage=''；
var url=window.location.href；
var nextPageBaseUrl=url+'？p='；
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>=（$（文档）.height（）-$（窗口）.height（））*0.7&&！正在加载）{
var nextPage=$（“.pages items li.current”）.next（“li”）.find（“a span”）.eq（1.html（）；
下一页=nextPageBaseUrl+nextPage；
控制台日志（下一页）；
isloading=true
$.ajax({
url：下一页，
键入：“GET”，
成功：功能（数据）{
this.isloading=false；
this.nextPage=this.nextPage+1；
$（'ol.product items'）.append（$（data.find（'div.products-grid'）.html（））；
$（'.infinite-loader'）.html（$（data.find（'div.infinite-loader'）.html（））；
$（'.toolbar-products'）.html（$（data.find（'div.toolbar-products'）.html（））；
}.绑定（此）
});
};
});
});

测试
1.

我猜您想在Ajax调用已经启动时限制进一步的Ajax调用吗？ 您是否尝试过使用一个变量，如下所示，请参阅

isloading

变量

nextPage

和

nextPage基本URL

用于下一页逻辑

require([
  'jquery'
], function($) {
  var next_page = '';
  var isloading = false;
  var nextPage = $(".pages-items li.current").next("li").find("a span").eq(1).html();
  var nextPageBaseUrl = 'https://www.test.com/test?p=';

  $(window).scroll(function() {
    if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.7 && !isloading) {

      next_page = nextPageBaseUrl + nextPage;

      console.log(next_page);
      isloading = true

      $.ajax({
        url: next_page,
        type: 'GET',
        success: function(data) {
          this.isloading = false;
          this.nextPage = this.nextPage + 1;
          $('ol.product-items').append($(data).find('div.products-grid').html());
          $('.infinite-loader').html($(data).find('div.infinite-loader').html());
          $('.toolbar-products').html($(data).find('div.toolbar-products').html());
        }.bind(this)
      });
    };
  });
});

---

这行代码使其在屏幕高度达到70%后加载

if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.7) {

相反，请使用以下命令：

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

---

你的问题标题与描述完全不同。我为你编辑了它you@RoryMcCrossan很抱歉。谢谢我希望我的问题现在清楚了。是的，你明白我的问题了。但是我不想在第一个启动之前启动ajax。但是我希望ajax不要重复。就像p=2触发一样，在加载p=2后，它也应该触发p=3。因此，您可以看到工具栏将更新，使当前为2，因此3将是指向目标的href。对于p=2，代码工作正常，但在加载数据p=2后，它停止了，而当我向下滚动时，它应该加载p=3。你能帮忙吗。我想我快到了。我检查了console.log，仍然得到了p=2。我想当成功触发时，你也应该更新你的

下一页
变量。你能帮助我怎么做吗？这会有什么区别？当你减去高度，然后乘以0.7，你就定义了屏幕高度的70%处的截断。如果必须，请尝试用0.95代替0.7。如果您看到我的问题，这不是问题所在。它与ajax有关。