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

Question

我正在关注此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

$.getScript(url)当用户从底部滚动到50px时,您的代码将触发调用.然后另一个调用,如果他们从底部滚动到49px.然后另一个如果他们从底部滚动到48px,这将继续,直到其中一个AJAX调用返回并使页面更高; 一旦页面更高,你将超出50px区域,并且获取更多产品...将停止.

你只希望一次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和jqXHR的always当底层回调将被称为$.ajax呼叫结束.