jquery 中ajax執行的優先順序_jquery

今天在做使用者註冊時：發現了一個奇怪的問題，請看代碼：

$('input[name="username"]').blur(function(){    //驗證格式    var pattern = /^[a-z][\w]{4,11}$/i;    if(!pattern.test($(this).val())) {      $(this).siblings('.desc').html('<font style="color:red;">5-12個字元，必須以字母開頭，只能輸入數字，字母和底線</font>');      return false;    }    //驗證使用者名稱是否被註冊    $.post('register.php?act=checkUser',{username:$(this).val()},function(data){      if(data.status == 'error') {        $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>');        return false;      }    },'json');        //成功 alert('成功');    //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />');  });

按道理說，上面的格式是

1、驗證使用者名稱是否符合格式
2、格式正確再AJAX判斷使用者名稱是否被佔用，
3、都成功則顯示正確的表徵圖，

但是問題是當我驗證使用者格式成功了之後，它就直接執行了，alert('成功')，然後再執行ajax，這是為什麼呢？是ajax執行的時間問題嗎？還是別的？？？

這是PHP代碼：

if($_GET['act'] == 'checkUser') {  if($_SERVER['HTTP_X_REQUESTED_WITH'] !== 'XMLHttpRequest') exit('非法操作！！！');  $sql = "SELECT id FROM {$sys_vars['db_pre']}user WHERE username='{$_POST['username']}'";    $result = mysql_query($sql);  $data = mysql_fetch_assoc($result);  if ($data) {    exit(json_encode(array('status'=>'error','info'=>'該使用者名稱已被註冊！！！')));  }else{    exit(json_encode(array('status'=>'success')));  }}

分析如下

ajax是非同步作業，當執行ajax相關功能函數時，系統先返回函數，再進行請求，當收到請求結果，會通過調用回呼函數的方式返回給使用者。

$('input[name="username"]').blur(function(){    //驗證格式    var pattern = /^[a-z][\w]{4,11}$/i;    if(!pattern.test($(this).val())) {      $(this).siblings('.desc').html('<font style="color:red;">5-12個字元，必須以字母開頭，只能輸入數字，字母和底線</font>');      return false;    }    //驗證使用者名稱是否被註冊    $.post('register.php?act=checkUser',{username:$(this).val()},function(data){      if(data.status == 'error') {        $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>');        return false;      }    },    function(data){  //對於post函數，第三個參數為回呼函數      alert('成功');    }    ,'json');        //成功 //alert('成功');    //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />');  });

照這樣修改一下，試試，體會一下不同之處。
不同的ajax函數 其回呼函數的使用方法略有不同，可參考w3school的教程或jQuery官網。

這個其實是js的同步和非同步問題，非同步話你可以想象一下兩條線路

複製代碼 代碼如下:

--執行函數調用--正則驗證--發起ajax--函數返回         ajax回調
                            |                        |
                            |                        |
                           瀏覽器請求--php處理--瀏覽器接到結果

如果想讓函數返回在ajax回調之後，可以改變上邊的模型，例如：

複製代碼 代碼如下:

--執行函數調用--正則驗證--發起ajax                  ajax回調--函數返回
                            |                        |
                            |                        |
                           瀏覽器請求--php處理--瀏覽器接到結果

這個可以通過修改jquery的發起ajax是非同步還是同步方式來實現！

$('input[name="username"]').blur(function(){  //驗證格式  var pattern = /^[a-z][\w]{4,11}$/i;  if(!pattern.test($(this).val())) {    $(this).siblings('.desc').html('<font style="color:red;">5-12個字元，必須以字母開頭，只能輸入數字，字母和底線</font>');    return false;  }  //驗證使用者名稱是否被註冊  var ajaxCheckUser = false;  $.ajax({    type: "POST",    url: "register.php?act=checkUser",    data: {username:$(this).val()},    // 注意這裡    async:false    success: function(data){    if(data.status == 'error') {      $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>');      //return false;    } else {      ajaxCheckUser = true;    }  },'json');    if(ajaxCheckUser) {    //成功    alert('成功');    //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />');  }  });

以上所述就是本文的全部內容了，希望大家能夠喜歡。