如何控制ajaxified分页中的事件顺序？答案

【问题标题】：How to control event order in ajaxified pagination?如何控制ajaxified分页中的事件顺序？
【发布时间】：2012-06-02 10:19:16
【问题描述】：

在 Rails 索引视图中，我正在实现 ajax 分页，或多或少遵循 Railscast。

当用户点击分页链接时，我希望发生以下步骤：

现有索引淡出。
显示微调器。
新的索引内容淡入。

在 index.js.erb 我有以下内容：

$(".ajaxable-content").fadeOut('fast');
$(".ajaxable-content").html('<div class="ajax-spinner></div>');
$(".ajaxable-content").delay(400);
$(".ajaxable-content").html('<%= escape_javascript(render :partial => "my/ajax/content" %>');
$(".ajaxable-content").fadeIn('slow');

尽管有 delay 函数，但我看到的是：

呈现新内容。
内容淡出。
内容淡入。

这不是一个很好的用户体验！

（此外，微调器似乎没有显示。或者可能更换得太快而无法引起注意）。

确保在呈现新内容之前完成淡出的正确方法是什么？

最好的设置方法是什么，以便在发生淡入淡出和微调时对数据库的请求在后台发生？

【问题讨论】：

标签： jquery ruby-on-rails ajax will-paginate

【解决方案1】：

index.js.erb 中的任何操作都将在其内容已经呈现并交付到客户端时执行。因此它只能用于显示内容（并隐藏“加载”微调器）。在发送 ajax 请求之前尝试淡出当前页面并显示微调器，例如（我正在使用截屏视频中的代码）

$(function () {
  $('#products th a').live('click', function () {
    var href = this.href;
    $(".ajaxable-content").fadeOut('fast', function(){
      $(".ajaxable-content").html('<div class="ajax-spinner></div>');
      $.getScript(href);
    });
    return false;
  });
})

并且在 index.js.erb 中只剩下最后两行

$(".ajaxable-content").html('<%= escape_javascript(render :partial => "my/ajax/content" %>');
$(".ajaxable-content").fadeIn('slow');

微调器的可见性还取决于您的 css：当您显示它时，它的父 div 会隐藏（淡出）。

【讨论】：