无法实现无限滚动

Question

我正在尝试在自定义列表页面上使用无限滚动。 我正在尝试使用AJAX创建此文件。

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

<script type="text/javascript">
    require([
  'jquery'
], function($) {
  var next_page = '';
  var isloading = false;
   var nextPage = '';
  var url      = window.location.href; 
  var nextPageBaseUrl = url+'?p=';

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

        var nextPage = $(".pages-items li.current").next("li").find("a span").eq(1).html();
      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)
      });
    };
  });
});
</script>

<ul class="items pages-items" aria-labelledby="paging-label">
  <li class="item current">
    <strong class="page">
      <span class="label">test</span>
      <span>1</span>
    </strong>
  </li>
  <li class="item">
    <a href="https://www.test.com/test?p=2" class="page">
      <span class="label">Page</span>
      <span>2</span>
    </a>
  </li>
  <li class="item">
    <a href="https://www.test.com/test?p=3" class="page">
      <span class="label">Page</span>
      <span>3</span>
    </a>
  </li>
</ul>

Answer 1

我猜您想在一个已经触发的情况下限制进一步的Ajax调用吗？ 您是否尝试过使用变量，如下所示，请参见isloading变量。 nextPage和nextPageBaseUrl用于下一页逻辑。

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)
      });
    };
  });
});

Answer 2

这行代码使其在屏幕高度70％之后加载。

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

而是使用这个-

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