Question

I have a jquery script that is correctly loading new pages for an infinite scroll setup. What I would like to do is have it so that when you’re say 300px away from the bottom, it loads more. I’m able to do that now, but unfortunately the scroll registers multiple times and the ajax loads the rest of the page. I’ve tried setTimeout to no avail.

        (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

With this modification you don’t perform another ajax-request if the previous hasn’t finished yet:

(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;
                }
            })

        }

    });

})();