gpt4 book ai didi

javascript - 无限滚动和 will_paginate 多次附加项目的 'next page'

转载 作者:数据小太阳 更新时间:2023-10-29 06:07:30 25 4
gpt4 key购买 nike

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

最佳答案

当用户从底部滚动到 50px 时,您的代码将触发 $.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返回 jqXHRjqXHRalways回调将在底层 $.ajax 调用完成时调用。

关于javascript - 无限滚动和 will_paginate 多次附加项目的 'next page',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13555101/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com