在现有网站中实施Infinite Scroll

Question

我们正在尝试在现有网站中实现无限滚动。 当前，我们有一个图像“单击更多”，它对方法GetArticlesFromNextSection（true）进行ajax调用，该方法返回我们附加在#sectionArticles中的数据。 这很完美。

现在，我们正在尝试使其自动运行，因为当用户到达末尾时，应该调用GetArticlesFromNextSection（true）方法来加载下一个块。 这是我们正在使用的：

<script type="text/javascript">
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            $('#lnkShowMore1').trigger('click'); //click image or
            //GetArticlesFromNextSection(true);
        }
    });
</script>

上面代码的问题是，它会连续调用方法GetArticlesFromNextSection（true），直到没有数据要从数据库加载为止。 它应该对方法GetArticlesFromNextSection（true）进行一次调用，然后停止，并且当用户尝试再次滚动时，它应该下一个块。

如何做到这一点？

编辑

我使用了flag，但是它仅加载一次，并且永远不会加载。 这不是无限循环，当用户到达终点时，它应该再次加载另一个块。 这是我使用的：

<script type="text/javascript">
    var is_loading = false;
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height() -300) {
            if (is_loading) {
                return;
            }
            is_loading = true;
            //$('div#more').show();
            $('#lnkShowMore1').trigger('click'); //click image or
            //GetArticlesFromNextSection(true);
            //$('div#more').hide();
        }
    });
</script>

Answer 1

看一下如何对ajax请求进行速率限制的答案？

您可以在脚本中包含并使用Underscore的_.throttle（），也可以看看它们如何实现它并适应您的代码，而不是仅出于单个目的而包括整个库。

编辑：

使用下划线，您的代码可能如下所示：

<script type="text/javascript">

$(window).scroll(_.throttle(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        $('#lnkShowMore1').trigger('click'); 
    }
}, 1000));

...应该将请求速率限制为每秒一次。

Answer 2

您可以设置一个标志来检查内容是否已加载。

<script type="text/javascript">
$(window).scroll(function () {
    if (!isLoading && $(window).scrollTop() == $(document).height() - $(window).height()){
    isLoading = true;    
    $('#lnkShowMore1').trigger('click'); //click image or
        //GetArticlesFromNextSection(true);
    }
});
</script>

在Ajax回调集内

isLoading = false;