Infinite scroll and will_paginate appending the 'next page' of items multiple times

Question

I am following this railscast in trying to implement an infinite scroll page on my rails app. When a user scrolls down to the bottom of the page an new set of items is appended and the page extends, however it is appended to the page multiple times and the event triggers again on scrolldown even when all the items in the array have been loaded, appending the same set of items again multiple times.

What I would like is to append the 'next page' of items each time a user scrolls to the bottom, and subsequent next pages as the user scrolls to the bottom again.

Here is the jQuery for this function:

jQuery ->
  if $('.pagination').length
          $(window).scroll ->
                  url = $('.pagination .next_page').attr('href')
                  if url &&  $(window).scrollTop() > $(document).height() - $(window).height() - 50
                      $('.pagination').text('Fetching more products...')
                      $.getScript(url)
$(window).scroll()

and here is the corresponding javascript

$('#products').append('<%= j render(@products) %>');
<% if @products.next_page %>
    $('.pagination').replaceWith('<%= j will_paginate(@products) %>');
<% else %>
    $('.pagination').remove();
<% end %>

Answer 1

Your code will trigger a $.getScript(url) call when the user scrolls to 50px from the bottom. Then another call at if they scroll to 49px from the bottom. Then another if they scroll to 48px from the bottom and this will continue until one of the AJAX calls returns and makes the page taller; once the page is taller, you'll be outside the 50px zone and the Fetching more products... will stop.

You only want one getScript going at a time. Once they scroll into the 50px zone, you want to fetch some more stuff from the server (just once) then ignore subsequent scrolls until the server has responded.

You should be doing something more like this:

$(window).scroll ->
    # Bail out right away if we're busy loading the next chunk.
    return if(window.pagination_loading)

    url = $('.pagination .next_page').attr('href')
    if url &&  $(window).scrollTop() > $(document).height() - $(window).height() - 50
        # Make a note that we're busy loading the next chunk.
        window.pagination_loading = true

        # Load as before but attach a callback to clear the flag when we're done.
        $('.pagination').text('Fetching more products...')
        $.getScript(url).always -> window.pagination_loading = false

$.getScript returns a jqXHR and the jqXHR's always callbacks will be called when the underlying $.ajax call is finished.