Analysis of variable assignment problems caused by jQuery ajax time difference

Analysis of variable assignment problems caused by jQuery ajax time difference_jquery

WBOY

Release： 2016-05-16 15:18:50

Original

1664 people have browsed it

The example of this article analyzes the variable assignment problem caused by jQuery ajax time difference. Share it with everyone for your reference, the details are as follows:

Ajax asynchronous request has made a lot of contributions in various special effects. With it, the user experience will be better. Let’s talk about a problem Zeng Jin encountered. I encountered it again today and it took me a little time. It is a small problem, but it is easy to ignore and it is not easy to think of the cause. Without further ado, let’s give an example and everyone will understand.

1. Prepare test files test.php and test.html

1. test.php

<&#63;php
echo "1";
&#63;>

Copy after login

2. test.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<div>www.jb51.net</div>
</body>
</html>
<script type="text/javascript">
//js代码放到这里
</script>

Copy after login

2. Question examples

<script type="text/javascript">
function test(value){ //定义一个function
 error = false; //定义一个测试变量
 $.ajax({ //ajax异步请求
 type: "POST", //传值方式post
 url: "test.php", //异步请求的文件
 data: "name="+value, //异步请求的参数
 success: function(msg){ //请求成功的回调函数
 if($.trim(msg) == '1'){
 error = true; //返回值为1，把error变成true
 }
 }
 });
 alert(error); //打印一下error的内容，在这里你知道它会弹出什么吗？
 if(error == true){
 $("div").remove();
 }
}
test("good");
</script>

Copy after login

Alert(error) in the code; no matter what msg returns, only false will pop up. According to the execution principle of javascript, it is generally executed sequentially, so why is the value of this error not changed? The reason is that there is a time difference in asynchronous requests. In order to verify this time difference, I will give an example so that you can clearly see this time difference.

3. Verify the time difference of 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); //在这里打印一下error
 }
 }
 });
 alert(error); //在这里打印一下error
 if(error == true){
 $("div").remove();
 }
}
test("good");
</script>

Copy after login

When you refresh the page, the problem is very clear. The first pop-up is false, and then the pop-up true. The time difference between the two pop-ups is the time difference of the ajax asynchronous request. On the surface, the execution order of this js code is like this: top--bottom--middle. In fact, it is not like this. The order of code execution is still top--middle--bottom. Why is the following code executed first? That's because ajax asynchronous request takes time, and js does not wait, so there is a time difference here.

4. Solution

1. Put the actual action to be performed 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(); //实际要操作的动作
 }
 });
}
test("good");
</script>

Copy after login

The previous examples are just for illustration. You wouldn’t write code like that when you actually write code, haha.

2. Make a synchronization request

<script type="text/javascript">
function test(value){
 error = false;
 $.ajax({
 type: "POST",
 url: "test.php",
 async: false, //进行同步请求，默认是true的
 data: "name="+value,
 success: function(msg){
 if($.trim(msg) == '1'){
 error = true;
 alert(error); //弹一下error
 }
 }
 });
 alert(error); //在弹一下error
 if(error == true){
 $("div").remove();
 }
}
test("good");
</script>

Copy after login

When you refresh the page, two true pops up here. Why is this? After adding async:false, there will be a waiting process, which means that ajax will not finish executing 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 very bad.

Readers who are interested in more jQuery ajax related content can check out the special topic of this site: "Summary of Ajax usage in jquery"

I hope this article will be helpful to everyone in jQuery programming.