Home > Article > Web Front-end > 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!