按順序執行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')) %>");