Javascript 什么'；当内容用尽时，结束无限滚动的最有效方法是什么？

我们有一个web应用程序，当我们到达页面底部时，会自动加载更多内容，如下所示：

$window
.on('scroll', function () {
    var 
        $this = $(this)
    ;
    if ($this.scrollTop() == $document.height() - $window.height()
        && $('#product-list').hasClass('has-more')) {
        // load more content
    }
})

我们目前在父元素上使用“has more”类，当没有更多可用内容时，该类将被删除

---

我对这种方法不太满意，知道吗？

您可以在范围内设置并检查一个变量。因此，您的示例如下：

!function() {
    var hasMore = true;

    $window.on('scroll', function () {
        var $this = $(this);

        if ($this.scrollTop() == $document.height() - $window.height() && hasMore) {
            // load more content & set hasMore to false if applicable 
        }
    })
}();

这里唯一的问题是在页面加载上设置

hasMore

。您可以在页脚中编写

hasMore

，而不是像我那样做（将其放入自动执行函数中）。这取决于你

---

此方法将避免将类名重载为布尔值，并将为您节省查询DOM的成本（尽管它非常小）。

如果没有其他内容，并且（仍然）在滚动事件中继续检查它的存在，那么为什么不删除事件处理程序本身呢

---

这样，您就没有事件处理程序，也没有决策制定，直到您再次绑定它时，其他ajax事件告诉您现在有可用的内容。

Hmm，我们在视图和js之间共享一个对象，非常类似于.NET MVC的ViewBag。。我可以把它放在那里。。