javascript - 无限滚动在底部之前触发

Question

您好，我正在使用以下代码行在用户位于底部之前触发额外元素 100px 的附加:

var height = window.innerHeight;
if ($(window).scrollTop() + height + 100 >= $(document).height())

问题是很多时候发送了多个追加命令。如果用户在底部之前到达 100px，则执行命令。当用户不断上下滚动时，该命令会一次又一次地执行。

我试过这个:

$(window).scroll(function () {
    if ($(window).scrollTop() + height == $(document).height()) {
        // anything
    }
}

Answer 1

滚动事件在大多数浏览器中触发得非常频繁。我猜它在第一个请求返回之前会触发多次。如果已经有一个正在运行的请求，您可能想添加一个标志来阻止请求。

var requesting = false;

function renderPage() { /* ... */ }

function makeRequest() {
  if (!requesting) {
    // Go ahead and fetch the next page.
    requesting = true;
    $.ajax(...).then(renderPage).always(function() {
      requesting = false;
    });
  }
}

$(window).on('scroll', function() {
  if (/* scrolled to 100px above the bottom */) {
    makeRequest();
  }
});