Home > Developer > JavaScript
Analysis of variable assignment problems caused by jQuery ajax time difference, jqueryajax
This article analyzes the variable assignment problems caused by jQuery ajax time difference. We will share this with you for your reference. The details are as follows:
Ajax asynchronous requests have made a lot of contributions in various special effects, with which the user experience is better. Next, let's talk about a problem that I encountered today. It took me a little more time and a small problem, but it is very easy to ignore and it is difficult to think about the cause. If you don't talk much about it, let's take an example.
Test files test.php and test.html
1. test. php
<?phpecho "1";?>
2. test.html
<Html>Ii. Example
<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 ", // file data of the asynchronous request:" name = "+ value, // The success: function (msg) parameter of the asynchronous request) {// if ($. trim (msg) = '1') {error = true; // The returned value is 1 and the error is changed to true }}); alert (error ); // print the error content. Do you know what will pop up here? If (error = true) {$ ("div"). remove () ;}} test ("good"); </script>Alert (error) in the Code; no matter what msg returns, only false will pop up, according to the javascript Execution principle, generally it is executed in sequence, why is the error value not changed? The reason is that there is a time difference between asynchronous requests. To verify the time difference, we can give you a clear example of this time difference.
Iii. Verify the time difference of ajax asynchronous requests
<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 error }}); alert (error ); // print error if (error = true) {$ ("div") here "). remove () ;}} test ("good"); </script>When you refresh the page, the problem is very clear. The first pop-up is false, and then the pop-up is true. The time difference between the second pop-up is the time difference between ajax asynchronous requests. On the surface, the execution sequence of this js Code is as follows: top, bottom, and bottom. Actually, this is not the case. The code execution sequence is still top, middle, and bottom. Why is the following code executed first? That is because ajax asynchronous requests require time, while js does not wait, so there is a time difference here.
Iv. Solution
1. Put the actual action to be operated in the callback function to avoid this time difference
<Script type = "text/javascript"> function test (value) {$. ajax ({type: "POST", url: "test. php ", data:" name = "+ value, success: function (msg) {$ (" div "). remove (); // the action to be performed});} test ("good"); </script>The previous examples are for example. Actually writing code won't be like that, haha.
2. synchronous request
<Script type = "text/javascript"> function test (value) {error = false; $. ajax ({type: "POST", url: "test. php ", async: false, // synchronous request. The default value is true data:" name = "+ value, success: function (msg) {if ($. trim (msg) = '1') {error = true; alert (error); // click error }}); alert (error ); // click error if (error = true) {$ ("div "). remove () ;}} test ("good"); </script>When you refresh the page, two true values are displayed. Why? After async: false is added, there will be a waiting process. That is to say, ajax will not be executed completely and the following code will not be executed. There is a problem with this method. If the waiting time is too long, the user experience will be poor.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
