Analysis of variable assignment problems caused by time difference of JQuery Ajax _jquery

The problem of variable assignment caused by the time difference of jquery Ajax is analyzed in this paper. Share to everyone for your reference, specific as follows:

Ajax asynchronous request, in a variety of special effects, made a lot of contributions, with it to make the user experience better. Here is a question I have encountered today, and I met, and spent a little time, small problems, but it is particularly easy to ignore, and it is not easy to think of what causes. Don't say much nonsense, for example, you will understand.

First, prepare test documents test.php and Test.html

1. test.php

<?php
echo "1";
? >

2. test.html

Ii. Examples of problems

<script type= "Text/javascript" >
function Test (value) {//define a function
 error = FALSE;//define a test variable
 $. Ajax ({//ajax asynchronous request
 Type: "POST",///Post
 URL: "test.php",///asynchronous requested file
 data: "Name=" +value,//asynchronous request Parameters
 Success:function (msg) {//Request successful callback function
 if ($.trim (msg) = = ' 1 ') {
 error = true;//return value is 1, turn error to True
 }
 }< c12/>});
 alert (error); Print the content of the error, here you know what it will pop up?
 if (Error = = True) {
 $ ("div"). Remove ()
 ;
}
Test ("good");
</script>

Alert (error) in code; no matter what MSG returns, it will only pop false, according to the principle of JavaScript execution, in general, sequential execution, then why the value of this error has not been changed? The reason is that there is a time lag in the asynchronous request, in order to verify the time difference, for example, you can clearly see that this time lag.

Iii. verifying the time lag of an AJAX asynchronous request

<script type= "Text/javascript" >
function Test (value) {
 error = false;
 $.ajax ({
 type: "POST",
 URL: "test.php",
 data: "Name=" +value,
 success:function (msg) {
 if ($.trim (msg) = = ' 1 ') {
 error = true;
 alert (error); Print the Error}}
 here
 );
 alert (error); Print the error
 if (Error = = True) {
 $ ("div") here. Remove ();
 }
Test ("good");
</script>

When you refresh the page, the problem is very clear, it first pop-up is false, and then pop-up true, two times between pop-up, is the time lag of the Ajax asynchronous request. Why would you execute the following code first? That is because the Ajax asynchronous request, takes time, and JS did not go to wait, so there is a lag here.

Iv. Methods of Settlement

1. Put the actual action into the callback function, to escape this time lag

<script type= "Text/javascript" >
function Test (value) {
 $.ajax ({
 type: "POST",
 URL: " Test.php ",
 data:" Name= "+value,
 success:function (msg) {
 $ (" div "). Remove ();//actual action to be manipulated
 }
 });
}
Test ("good");
</script>

The first few examples, is for example, really write code, not that write, haha.

2. Make a sync request

<script type= "Text/javascript" >
function Test (value) {
 error = false;
 $.ajax ({
 type: "POST",
 URL: "test.php",
 async:false,//synchronous request, default is true of
 data: "Name=" +value,
 Success:function (msg) {
 if ($.trim (msg) = ' 1 ') {
 error = true;
 alert (error); Flick the Error
 }
 }
 );
 alert (error); Playing with the error
 if (Error = = True) {
 $ ("div"). Remove ()
 ;
}
Test ("good");
</script>

When you refresh the page, here is a pop-up two true, why is this so? After adding the Async:false, there will be a wait process, which means that Ajax does not execute the following code. There is a problem with this method, if the waiting time is too long, the user experience is very bad.

For more information on jquery AJAX-related content readers can view the site: A summary of AJAX usage in jquery

I hope this article will help you with the jquery program design.