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

2022-01-24 00:00:00 ruby-on-rails jquery javascript coffeescript will-paginate

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

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.

这里是这个函数的 jQuery:

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

这里是对应的javascript

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 %>

推荐答案

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

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.

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

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 返回一个 jqXHR 和 jqXHR 的 always 回调将在底层 $.ajax 调用结束.

相关文章