jQuery的ajax async同步和異步介紹

項目中有這樣一個需求，使用ajax加載數據返回頁面並賦值，然後前端取出該值

這其中涉及到代碼的順序問題，有時後臺還未返回數據，但已執行後面代碼，

所以就會造成取不到值

$.ajax({
    type: "post",
    url: "admin/PfmOptionRuleItem.do",
    success: function(data){
        $("#ruleItem").val(data.ruleItem);  //①
    }
});
return $("#ruleItem").val();  //②

如果①還未從後臺返回數據 此時執行②就獲取不到值

Ajax的第一個字母是asynchronous的開頭字母，這意味着所有的操作都是並行的，完成的順序沒有前後關係。

$.ajax()的async參數總是設置成true，這標誌着在請求開始後，其他代碼依然能夠執行。

如果把這個選項設置成false，這意味着所有的請求都不再是異步的了，這也會導致瀏覽器被鎖死。

雖然官方不建議這麼幹，只是不能用太多，否則會造成用戶體驗不佳

舉個栗子

alert("setp 1");
$.ajax({
      url: "admin/PfmOptionRuleItem.do",
      async: false,
      success: function(data){
          alert("hello ajax"); //①
      }
});
alert("setp 2"); //②

當把asyn設爲false時，這時ajax的請求時同步的，也就是說，這個時候ajax塊發出請求後，

他會等待在①這個地方，不會去向下執行②，直到①執行完畢

此時依次執行順序爲

setp 1

hello ajax

setp 2

如果async爲true 則執行順序爲

setp 1

setp 2

hello ajax

作者：itmyhome