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

我正在关注此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('');  $('.pagination').replaceWith('');  $('.pagination').remove();  

Answer 1

当用户从底部滚动到50px时，您的代码将触发$.getScript(url)调用。 然后另一个调用，如果他们从底部滚动到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 ，当基础的$.ajax调用完成时，将调用jqXHR的always回调。