有沒有一種方法來執行JavaScript代碼在啓動同步AJAX調用之前執行

Question

我真的不知道我在這裏做錯了什麼。我得到了一些JavaScript（用jQuery）是這樣的：

function myFunc(){ 
    $('.wait').addClass('waiting'); 
    console.log('wait'); 
    var r = $.ajax({type: "GET", url: "my_URL", async: false}).responseText; 
    $('.wait').removeClass('waiting'); 
    console.log('stop wait'); 
    return r; 
} 

我的問題是出類「等待」不會添加，而這樣做的呼叫......我的意思是，當我打電話給我的功能，我得到了一個應該在開頭出現的div，然後在刪除之後它不出現。 一切似乎都在進行。我得到了我的Ajax調用，結果當我試圖不

$('.wait').removeClass('waiting'); 

我格現身但只有在我得到的Ajax響應來執行它。我想時間的要求，並把它大約2秒 ...所以我不知道爲什麼會發生這種情況。

它可能與同步ajax調用有關嗎？由於JavaScript是一種過程語言，因此我認爲應該在登錄到控制檯之前並在啓動ajax調用之前添加該類，但是在得到響應後我得到了所有修改（即使在JavaScript控制檯中，在ajax調用之後）。

任何幫助將是非常好的！

Answer 1

該函數運行時瀏覽器中沒有任何反應，所以您需要使用異步代碼，以便瀏覽器可以更新元素。在瀏覽器有機會更新之後，您可以使用setTimeout方法運行代碼的其餘部分。

由於代碼是異步的，所以不能從函數返回值，因爲在AJAX調用之前函數存在。使用一個回調函數來獲取值：

function myFunc(callback){ 
    $('.wait').addClass('waiting'); 
    window.setTimeout(function(){ 
    var r = $.ajax({type: "GET", url: "my_URL", async: false}).responseText; 
    $('.wait').removeClass('waiting'); 
    callback(r); 
    }, 0); 
} 

你一定要使用異步代碼更新元素，你可以如讓AJAX調用異步的，即保持瀏覽器被請求時反應遲鈍：

function myFunc(callback){ 
    $('.wait').addClass('waiting'); 
    $.ajax({type: "GET", url: "my_URL", success: function(data){ 
    $('.wait').removeClass('waiting'); 
    callback(data); 
    }}); 
} 

Answer 2

在這裏你去異步版本。你應該傳遞將被調用的回調函數。在給定的情況下，return data是錯誤的。

function myFunc() { 
    $('.wait').addClass('waiting'); 
    console.log('wait'); 
    var r = $.ajax({ 
     type: "GET", 
     url: "my_URL", 
     async: true, 
     success: function (data) { 
      $('.wait').removeClass('waiting'); 
      console.log('stop wait'); 
      return data; 
     } 
    }) 
}