Question

我有一个jquery脚本正确加载新页面以进行无限滚动设置。我想要做的是，当你从底部说300px时，它会加载更多。我现在能够做到这一点，但遗憾的是滚动记录多次，ajax加载页面的其余部分。我试过setTimeout无济于事。

        (function(){

            //inner functions will be aware of this
            var currentPage = 1;

                $(window).scroll(function() {

                if($(window).scrollTop() + $(window).height() > $(document).height() - 300) {

                    $.ajax({
                        type: "GET",
                        url: "posts/page/" + currentPage,
                        data: "",
                        success: function(results){
                            $(".container").append(results).masonry('reload');
                        }
                    })
                    setTimeout(currentPage++,3000);

                }

            });

        })();

Answer 1

通过此修改，如果之前尚未完成，则不执行另一个ajax请求：

(function(){

    //inner functions will be aware of this
    var currentPage = 1,
        currentXHR;

        $(window).scroll(function() {

        if($(window).scrollTop() + $(window).height() > $(document).height() - 300) {

            if (currentXHR) {
                return;
            }

            currentXHR = $.ajax({
                type: "GET",
                url: "posts/page/" + currentPage++,
                data: "",
                success: function(results){
                    $(".container").append(results).masonry('reload');
                },
                complete: function() {
                    currentXHR = null;
                }
            })

        }

    });

})();

Answer 2

这个here有一个很棒的RailsCast（不要担心，如果你不在Ruby中，你只是获取JSON数据。）

使用jquery或javascript延迟无限滚动

2 个答案: