jquery - 如何控制ajaxified分页中的事件顺序？

Question

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

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

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

在 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功能，但我看到的是：

1. 呈现新内容。
2. 内容淡出。
3. 内容淡入。

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

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

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

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

Answer 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 是隐藏的（淡出）。