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

events_controller.rb

class EventsController < ApplicationController
  respond_to :html, :js
  def index
    @events = Event.page(params[:page]).per(5)
    respond_with(@events)
  end
end

events/index.html.erb

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

events/events.html.erb

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

assets/javascripts/events/events_endless_page.js

$(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/index.js.erb

$('#events-tbl-body').append('<%= j render(@events) %>');
<% if (@events.current_page < @events.num_pages) %>
    $('.pagination').replaceWith('<%= j paginate(@events) %>');
<% else %>
    $('.pagination').remove();
<% end %>

这就像一种魅力。当我尝试集成setTimeout ajax轮询来刷新事件页面时，就会出现这个问题。

assets/javascripts/events/event_poller.js

$(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/index.js.erb中的代码，以使刷新行为正常工作：

events/index.js.erb

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

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