更改滚动逻辑的自动加载（防止用户等待）

Question

目前，当用户到达网站底部时，我使用以下逻辑从数据库自动加载新帖子：

$(window).scroll(function() {
 if ($(window).scrollTop() == $(document).height() - $(window).height()) {
  last_msg_funtion();
 }
});

足够了。它做了它应该做的事情，但我想改变这一点，以便当用户距离网站底部 100 像素时它开始加载新帖子。有什么想法吗？当我尝试更改代码时，我要么：

**进入了last_msg_function()调用的几乎无限循环，因为if()语句匹配例如距离底部100个像素并且每个像素下降到0个像素滚动时。因此，如果您滚动得非常慢，您可能会设法停在距底部 100 像素处，但这在现实生活中是行不通的。

**）它必须与我定义的底部像素完全匹配，例如90像素。如果您在例如 89 或 91 像素处停止滚动，它将不会加载任何内容。

那么，我应该更改什么以确保它在您 0 时开始加载 ->距网站底部 100 像素，但同时不会每次都发送新请求以在仍在加载时将滚动位置向任何方向更改几个像素？

谢谢！

Answer 1

您可以稍微更改一下您的支票，如下所示：

$(window).scroll(function() {
 if ($(window).scrollTop() > ($(document).height() - $(window).height() - 100)) {
  last_msg_funtion();
 }
});

您可以在此处尝试。这是检查滚动位置是否距实际底部 0-100px...您可能需要确保 last_msg_function() 如果已经正在加载，则不会执行任何操作（无论如何你都应该这样做），但除此之外，if() 是唯一需要的更改。

Answer 2

很好的答案，尼克。另一件要做的事情是确保每次用户滚动时滚动函数仅触发一次，否则，正如您所提到的，last_msg_function 将被多次调用。尝试这样的事情......

var processScroll = true;
$(window).scroll(function() {
    if (processScroll  && $(window).scrollTop() > $(document).height() - $(window).height() - 100) {
        processScroll = false;
        last_msg_funtion();
        processScroll = true;
    }
});