The priority of Ajax execution in jquery _jquery

Today in doing user registration: Found a strange problem, please see the code:

$ (' input[name= "username"]). blur (function () {
    //Validate format
    var pattern =/^[a-z][\w]{4,11}$/i;
    if (!pattern.test (). Val ()) {$ (this).
      siblings ('. Desc '). html (' <font style= ' color:red; " >5-12 characters, must start with a letter, can only enter numbers, letters and underscores </font> ');
      return false;
    }
    Verify that the user name is registered
    $.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 ');
    
    Success
 alert (' success ');
    $ (this). Siblings ('. Desc '). html ('  ');
  });

The format above is, according to reason,

1, verify that the user name is in line with the format
2, the format is correct and Ajax to determine whether the user name is occupied,
3, all success will display the correct icon,

But the problem is that when I verify that the user format is successful, it executes directly, alert (' Success '), and then executes Ajax, why? Is it a matter of time for Ajax execution? Or something else???

This is the PHP code:

if ($_get[' act '] = = ' CheckUser ') {
  if ($_server[' http_x_requested_with ']!== ' XMLHttpRequest ') exit (' Illegal operation!!! ');

  $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 ' => ') The username has been registered!!! ')));
  } else{
    exit (Json_encode (' status ' => ' success '));
  }

Analysis is as follows

Ajax is an asynchronous operation, and when performing AJAX-related functional functions, the system returns the function, then requests it, and returns it to the user by invoking the callback function when the request results are received.

$ (' input[name= "username"]). blur (function () {
    //Validate format
    var pattern =/^[a-z][\w]{4,11}$/i;
    if (!pattern.test (). Val ()) {$ (this).
      siblings ('. Desc '). html (' <font style= ' color:red; " >5-12 characters, must start with a letter, can only enter numbers, letters and underscores </font> ');
      return false;
    }
    Verify that the user name is registered
    $.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) {  //For post functions, the third parameter is the callback function
      alert (' success ');
    }
    , ' JSON ');
    
    Successful
 //alert (' success ');
    $ (this). Siblings ('. Desc '). html ('  ');
  });

Revise this, try, and experience the difference.
The use of callback functions for different AJAX functions is slightly different and can be referenced in the W3school tutorial or jquery website.

This is actually JS synchronous and asynchronous problems, asynchronous words you can imagine two lines

Copy code code as follows:

--performing a function call--regular validation--initiating the ajax--function to return the AJAX callback
| |
| |
Browser requests--php processing--The browser receives the result

If you want the function to return after the Ajax callback, you can change the top model, for example:

Copy Code code as follows:

--performing function calls--regular validation--initiating AJAX Ajax callbacks--function return
| |
| |
Browser requests--php processing--The browser receives the result

This can be done by modifying jquery's launch Ajax asynchronous or synchronous way!

$ (' input[name= "username"]). blur (function () {
  //Validate format
  var pattern =/^[a-z][\w]{4,11}$/i;
  if (!pattern.test (). Val ()) {$ (this).
    siblings ('. Desc '). html (' <font style= ' color:red; " >5-12 characters, must start with a letter, can only enter numbers, letters and underscores </font> ');
    return false;
  }
  Verify that the user name is registered
  var ajaxcheckuser = false;
  $.ajax ({
    type: "POST",
    URL: "Register.php?act=checkuser",
    data: {username:$ (this). Val ()},
    // Note here
    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) {
    //Success
    alert (' success ');
    $ (this). Siblings ('. Desc '). html ('  ');
  }
  
);

The above mentioned is the entire content of this article, I hope you can enjoy.