Details of AJAX execution sequence problem solving in JS (with solutions)

This article mainly explains the problem of solving the execution order of ajax in js. Now let us take a look at this article about the problem of solving the execution order of ajax.

In JS we You will encounter problems with the execution order, especially the execution order of AJAX. The default execution order in js is from top to bottom.

Look at the following piece of code

    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;	
  }

Since the AJAX here is an asynchronous request, 2 will pop up first and then 1 in the browser

This will cause problems If The flag defaults to 0 and will become 1 after AJAX is executed. Then the if statement actually uses 0 to make the judgment, which is inconsistent with our purpose. What we want is to use the flag assigned after AJAX is executed to do the if Judgment (If you want to see more, go to the PHP Chinese website AJAX Development Manual column to learn)

Solution:

The first type Method

The reason why such a problem occurs is because AJAX uses asynchronous requests, so if we want to pop up 1 first and then pop up 2, we only need to change AJAX to synchronization, that is, change Change async to false

In this way, if AJAX has not finished executing, the page will appear in a state of suspended animation and stop executing downwards. It will only go down when the AJAX callback is completed

Of course, we use AJAX In order to be asynchronous, the above method can be handled like this if you encounter special needs

The second method

The second method is more commonly used

For example, the following piece of code

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 is asynchronous. We want to pop up 1 first and then 2. We only need to put test2 in the callback function of test

Like this

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)
}

This article ends here (if you want to see more, go to the PHP Chinese website AJAX User Manual column to learn). If you have any questions, you can leave a message below.

The above is the detailed content of Details of AJAX execution sequence problem solving in JS (with solutions). For more information, please follow other related articles on the PHP Chinese website!