按顺序执行jquery语句

Question

我有一个Ruby on Rails应用程序和一些jquery以异步渲染部分。所以，首先我要改变标签的活动状态，然后清除标签页，然后加载部分：

$('#availability').addClass('active'); 
    $('#overview').removeClass('active'); 
    $('#availabilityTab').addClass('active').addClass('in'); 
    $('#overviewTab').removeClass('active').removeClass('in'); 
    $("#availabilityTab").html("<%= escape_javascript(render(partial: 'availability')) %>"); 

这工作得很好，但是当我点击选项卡来触发此，我希望看到一个首先空白页面页面和加载的数据。发生什么事是当点击标签时，似乎什么也没有发生，然后在3秒后显示部分。这是因为数据库调用需要一段时间（需要进行优化:-)）。这让用户感到困惑，我宁愿先看到一个空白的标签页。我怎样才能做到这一点？

更新：这是控制器动作的样子：

def index 
    @customers = Customer.order(:name) 
    @target = params[:target] unless params[:target].blank? 

    respond_to do |format| 
     format.html 
     format.js 
    end 
    end 

这是index.js.erb：

<% if @target == "overview" -%> 
    $('#availability').removeClass('active'); 
    $('#overview').addClass('active'); 
    $('#overviewTab').addClass('active').addClass('in'); 
    $('#availabilityTab').removeClass('active').removeClass('in'); 
    $("#overviewTab").empty().html("<%= escape_javascript(render(partial: 'overview')) %>"); 
<% elsif @target == "availability" -%> 
    $('#availability').addClass('active'); 
    $('#overview').removeClass('active'); 
    $('#availabilityTab').addClass('active').addClass('in'); 
    $('#overviewTab').removeClass('active').removeClass('in'); 
    $("#availabilityTab").html("<%= escape_javascript(render(partial: 'availability')) %>"); 
<% end %> 

Answer 1

在我看来，您使用的是阿贾克斯async: false（该冻结浏览器直到请求完成）

即使情况并非如此，你的效果依赖于你的数据库调用，这就是为什么你正在经历la G。为了解决这个问题，你需要重新配置你的系统在附近工作 Ajax，或者你需要尽可能自然地触发你的效果（在db调用处理后的后端IE）

这里有两种方法看看吧：

---

AJAX回调

wait for a jquery ajax callback from calling function

我们成功地使用Ajax Callba中正加载谐音在我们的生产应用程序之一，这里是我们如何做到这一点：

//app/assets/application.js 
$(".your_element").on("click", function() { 
    fetch_modal("link", function(data){ 
     //success 
    , function(data) { 
     //error 
    }); 
}); 

//Ajax 
function fetch_modal(link, success, error) { 
    $.ajax({ 
     url: link, 
     success: function(data) { success(data); }, 
     error: function(data) { error(data); } 
    }); 
} 

这不会冻结浏览器，并同步工作

我有一个脚本，通过Ajax使用这种技术称之为谐音如果你想链接。我一直意思发布

---

处理后DB呼叫你，如果你在事件发生后调用JS看到这些问题

的一个原因，而不是结果

为了解决这个问题，我想看看把JS后的“效果”代码已被处理，就像这样：

#app/controllers/example_controller.rb 
def example 
    @example = Example.find(1) 

    respond_to do |format| 
     format.html { redirect_to root_path } 
     format.js 
    end 
end 

#app/views/example/example.js.erb 
# Only fires after the DB call 
$('#availability').addClass('active'); 
$('#overview').removeClass('active'); 
$('#availabilityTab').addClass('active').addClass('in'); 
$('#overviewTab').removeClass('active').removeClass('in'); 
$("#availabilityTab").html("<%= escape_javascript(render(partial: 'availability')) %>");