无限滚动和 will_paginate 多次附加项目的“下一页”

Question

我正在关注this railscast，试图在我的 Rails 应用程序上实现无限滚动页面。当用户向下滚动到页面底部时，会附加一组新的项目并且页面会扩展，但是它会多次附加到页面，并且即使数组中的所有项目都已加载，事件也会在向下滚动时再次触发, 将同一组项目再次附加多次。

我想要的是每次用户滚动到底部时附加项目的“下一页”，并在用户再次滚动到底部时附加后续页面。

这里是这个函数的 jQuery：

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

这里是对应的javascript

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

Answer 1

当用户从底部滚动到 50 像素时，您的代码将触发 $.getScript(url) 调用。如果他们从底部滚动到 49px，则再次调用。然后另一个如果他们从底部滚动到 48px，这将一直持续到一个 AJAX 调用返回并使页面变高；一旦页面变高，您将超出 50 像素区域，获取更多产品... 将停止。

您一次只需要一个getScript。一旦他们滚动到 50px 区域，您想从服务器获取更多内容（仅一次）然后忽略后续滚动，直到服务器响应。

你应该做更多这样的事情：

$(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 返回一个jqXHR，当底层$.ajax 调用完成时，将调用jqXHR 的always 回调。