无休止的分页和ajax刷新

我目前有如下无休止的分页设置：

事件\u控制器.rb 除去上面的无休止的分页代码，下面是events/index.js.erb中的代码的样子，以使刷新行为正常工作：

事件/index.js.erb

$（'#事件容器'）.html（''events'，：locals=>{events:@events}，：formats=>:html）%>'）；
App.poller.Event.poll（）；

---

我的挑战是让无休止的分页代码和ajax刷新代码协同工作。如果我将ajax刷新与无休止的分页代码一起使用，那么最终发生的事情是将重复事件附加到events tbl body元素。另一个问题是，假设用户向下滚动页面，无休止的分页将第2页的结果附加到第1页的结果，那么ajax刷新代码如何知道如何显示第1页和第2页？这些只是其中的一些挑战。希望有人能提供指导。我知道这是一个冗长的问题，因此感谢您的关注。

我不完全确定“无休止的分页”这个术语，即使您不想立即显示所有内容，内容的数量是否有限制

这可能适合您：

---

我会用它来滚动并获得更多的结果，这是经过尝试和测试的：

我发现轮询器有两种不同的用途，如果我错了，请纠正我：

使用对这些事件的更新（包括删除）更新现有的、已在页面上的事件

添加新事件 我强烈建议，你把你的调查者分成两个不同的调查者，每个人负责一个行动

第一个将获取页面上当前事件的所有事件ID，并检查它们的更新。删除的事件将从页面中删除；更新的事件将被更新到位

第二个将查找在“上次轮询”时间戳之后创建的事件，并将这些事件插入页面顶部

---

我不确定第二个民意测验者会如何影响无休止页面的事件分页，但我认为这个挑战是可以解决的

我的建议是创建一个共享的AJAX方法，该方法检查内容有多旧，然后刷新特定内容（如文章、可订购项等），这段代码由分页代码或自动定时轮询调用

以情景为例

用户加载页面（1/4），其中包含4个部分。用户不滚动，您有4个条目需要在170000毫秒时更新。您更新的计时器将循环遍历这4个条目，并为这4个条目调用独立的AJAX更新程序

用户加载页面（1/4），然后向下滚动到页面（2/4）。分页代码将显示新的4个部分。用户将页面保持在原位，因此170000毫秒后，您需要刷新这些页面。就像上面的#1一样，计时器调用循环通过第5-8项（第2页的内容项），并为这4项调用独立的更新程序

用户加载页面（1/4），然后向下滚动到页面（4/4）。分页代码将显示所有部分（16个部分中的16个部分）。用户将页面保持在原位，因此170000毫秒后，您需要刷新这些页面。就像上面的#1和2一样，计时器调用循环通过第20-24项，并调用为这4项更新的独立函数

用户加载页面（1/4），然后向下滚动到页面（2/4）并离开。就像上面的#2一样，4个项目由计时器更新。然后，用户返回页面（1/4），因此分页/滚动代码通过一个小型（250ms）计时器调用（1-4）的独立函数，该计时器检查内容是否需要刷新，并执行刷新

用户加载页面（1/4），然后向下滚动到页面（4/4）并离开。就像#4一样，内容在最后一页刷新，然后向上滚动。当scroll事件发生时，它通过一个小的（250ms）计时器为已经存在的项目触发ajax更新程序，该计时器检查是否需要刷新这些项目，以及更新是否需要刷新

考虑

• 它允许您将“这是否需要更新”逻辑分解为一个共享函数，该函数同时容纳分页和用户保持页面静止的行为
• 它允许您确保您只更新显示的内容，并且该逻辑不会在两组函数中重复，因此您的逻辑可以在以后以最小的影响进行更新
• 当分页代码在“滚动”备份时调用此函数时有一个小的延迟，允许用户快速滚动一个元素，以至于不值得进行调用并使用服务器资源刷新屏幕上没有的内容

class EventsController < ApplicationController

  respond_to :html, :js

  def index
    @events = Event.page(params[:page]).per(5)
    respond_with(@events)
  end

end

<div id="events-container">
  <%= render :partial => 'events', :locals => {events: @events} %>
</div>

<div id="events-table-container" data-events-url="<%= current_url %>">

  <table id="events-tbl">
    <tbody id="events-tbl-body">
      <%= render events %>
    </tbody>
  </table>

  <%= paginate events %>

</div>​

$(function() {
  var isScrolledIntoView;
  isScrolledIntoView = function(elem) {
    var docViewBottom, docViewTop, elemBottom, elemTop;
    docViewTop = $(window).scrollTop();
    docViewBottom = docViewTop + $(window).height();
    elemTop = $(elem).offset().top;
    elemBottom = elemTop + $(elem).height();

    return (elemTop >= docViewTop) && (elemTop <= docViewBottom);
  };

  if ($('#events-container .pagination').length) {
    $(window).scroll(function() {
      var url;
      url = $('#events-container .pagination .next a').attr('href');
      if (url && isScrolledIntoView('#events-container .pagination')) {
        $('#events-container .pagination').html("<span class='working-notice'>Fetching more...</span>")

        return $.getScript(url);
      }
    });

    return $(window).scroll();
  }
});

$('#events-tbl-body').append('<%= j render(@events) %>');

<% if (@events.current_page < @events.num_pages) %>
    $('.pagination').replaceWith('<%= j paginate(@events) %>');
<% else %>
    $('.pagination').remove();
<% end %>

$(document).on('ready', function() {
  App.Pollers.Event.poll();
});

App.Pollers.Event = {

  frequency: 170000,

  poll: function() {
    setTimeout(App.Pollers.Event.request, App.Pollers.Event.frequency);
  },

  request: function() {
    eventsRequest = $.getScript($('#events-table-container').data('events-url'));
    return eventsRequest;
  },

};

$('#events-container').html('<%= j(render :partial => 'events', :locals => {events: @events}, :formats => :html) %>');

App.Pollers.Event.poll();