JS 中 AJAX執行順序解決方法

在JS中我們會遇到執行順序的問題，尤其是AJAX的執行順序，js中默認的執行順序是從上往下執行。

看下面的一段代碼

callback:function(value, validator, $field){
        $.ajax({
          url : window.ctx+"/sys/manager/validateLoginName",
          data:{loginName:value},
          type : 'post',
          dataType : "json",
          async:true,  
          success: function(result){
          if(result!=null)
          globalVariable.flag=result;
          alert(1)
               }});
          alert(2)
          if(globalVariable.flag!=1)return true;
          if(globalVariable.flag==1)return false;    
  }

由於這里的AJAX是異步請求，所以在瀏覽器中會先彈出2在彈出1
這樣就會出現問題  假如flag默認是0，在執行完AJAX之后會變成1,那么if語句其實是用0去做的判斷，與我們的目的不相符，我們想要的是用AJAX執行完之后賦值的flag去做if判斷

解決

第一種方法
之所以出現這樣的問題是因為AJAX采用了異步請求，所以如果我們想先彈出1再彈出2只需要把AJAX改為同步即可，也就是將async改為false

這樣如果AJAX沒有執行完頁面會出現假死狀態，停止往下執行，只有當AJAX回調走完以后才會往下走

當然我們使用AJAX就是為了異步，所以上面的方法是遇到特殊的需要了可以這樣處理

 

第二種方法

第二種辦法是比較常用的

例如下面一段代碼

function test(){
    $.ajax({
          url : window.ctx+"/sys/manager/addUserRole",
          data:formData,
          type : 'post',
          dataType : "json",
              processData:false,
              contentType:false,
          success: function(result){
              if(result!=null){
                  testCallback();
              }
        }});
         test2();
 }
function testCallback(){
    alert(1)
}
function test2(){
    alert(2)
}

AJAX是異步的，我們希望先彈出1再彈出2我們只需要把test2放在test的回調函數中即可

像這樣

function test(){
    $.ajax({
          url : window.ctx+"/sys/manager/addUserRole",
          data:formData,
          type : 'post',
          dataType : "json",
          processData:false,
          contentType:false,
          success: function(result){
              if(result!=null){
                  testCallback();
              }
        }});
}
function testCallback(){
    alert(1)
    test2()
}
function test2(){
    alert(2)
}

希望對大家有幫助

本文轉自：https://blog.csdn.net/qq_33251859/article/details/75046952