Question

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

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

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

我对这种做法不太满意，有什么想法吗？

Answer 1

你可以设置＆amp;检查范围内的变量。所以你的例子就像：

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

这里唯一的问题是在pageload上设置hasMore。您可以在页脚中编写hasMore，而不是执行我所做的操作（将其置于自执行功能中）。这取决于你。

这个方法可以避免将类名重载为boolean，并且可以节省查询DOM的成本（尽管它非常小）。

Answer 2

当没有其他内容并且（仍然）继续检查它在滚动事件上的存在时，不是删除类has-more，为什么不删除事件处理程序本身？

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

在内容耗尽时结束无限滚动的最有效方法是什么？

2 个答案: