Question

我们正在尝试在现有网站中实现无限滚动。目前，我们有一张图片，点击查看更多信息＆＃39;它对方法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）进行一次调用并停止，当用户再次尝试滚动时，它应该是下一个块。

如何实现这一目标？

修改

我使用了旗帜，但它只加载了一次而且再也没有。这不是无限循环，它应该在用户到达结束时再次加载另一个块。这是我用过的：

<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

查看How to rate-limit ajax requests?

的答案

您可以在脚本中包含和使用Underscore的_.throttle（），或者查看它们如何实现它并适应您的代码，而不是为了一个目的而包含整个库。

修改

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

<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;

在现有网站中实施无限滚动

2 个答案: