jQuery无限滚动双加载

Question

我在这些代码中使用 jquery.window.scroll 函数的无限加载。

$(window).scroll(function(){
    if  ($(window).scrollTop() == $(document).height() - $(window).height()){
        var page = $('#lastPostsLoader').attr('page')*1;
        $('#lastPostsLoader').attr('page', page + 1);
        DataLoadFunction(page);
    }
});

但是这些代码在滚动到底部时请求双倍时间，有时甚至会出现错误页面。像这样；

滚动底部--->加载页面1并加载页面2--->滚动底部--->加载页面3并加载页面2--->滚动底部--->加载页面4和加载页面5 ........

那我哪里错了？谢谢...

Answer 1

您应该阻止数据加载，直到下一个数据到达。从服务器加载数据时将变量 isLoadingData 设置为 true。

var isLoadingData;
 $(window).scroll(function(){
        if  (($(window).scrollTop() == $(document).height() - $(window).height()) && !isLoadingData ){
              isLoadingData = true; 
            var page = $('#lastPostsLoader').attr('page')*1;
            $('#lastPostsLoader').attr('page', page + 1);
            DataLoadFunction(page, function(){ //  callback get called after data load
                        isLoadingData  = false;
            });
        }
    });