在現有網站中實施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;