无限滚动和will_paginate多次附加项目的“下一页” [英] Infinite scroll and will_paginate appending the 'next page' of items multiple times

问题描述

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

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

/ p>

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

推荐答案

您的代码将触发 $ .getScript（url）当用户从底部滚动到50像素时调用。然后另一个调用，如果他们滚动到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 调用完成。

这篇关于无限滚动和will_paginate多次附加项目的“下一页”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！