javascript - 使用 jquery 或 javascript 延迟无限滚动

Question

我有一个 jquery 脚本可以正确加载新页面以进行无限滚动设置。我想做的是拥有它，这样当您说距离底部 300 像素时，它会加载更多。我现在可以做到这一点，但不幸的是，滚动注册了多次，而 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

这里有一个优秀的 RailsCast （如果你不在 Ruby 中，别担心，反正你只是在获取 JSON 数据。）