jQuery ajax時間差所導致的變數賦值問題分析_jquery
- WBOY原創
- 2016-05-16 15:18:501664瀏覽
本文實例分析了jQuery ajax時間差所導致的變數賦值問題。分享給大家參考，具體如下：
ajax非同步請求，在各種特效方面，做出了不少的貢獻，有了它讓使用者體驗更好。下面說一下曾今遇到過的一個問題，今天又遇到了，又花了我一點時間，小問題，但是特別容易忽視，並且不容易想到是什麼原因產生的。廢話不多說，舉例大家就懂了。
一、準備測試檔test.php和test.html
1. test.php
<?php echo "1"; ?>
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>
二、問題舉例
<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>
程式碼中的alert(error);不管msg回傳什麼，都只會彈出false，按javascript的執行原理，一般情況下都是順序執行的，那為什麼這個error的值沒有被改變呢？原因就在於非同步請求是有一個時間差的，為了驗證這個時間差，在舉個例子，可以讓你清楚的看到，這個時間差。
三、驗證ajax非同步請求的時間差
<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>
當你刷新頁面後，問題就很清楚，它首先彈出的是false,然後彈出了true，二次彈出之間的時間差，就是ajax異步請求的時間差。從表面上看，這段js程式碼的執行順序是這樣的上--下--中，其實不是這樣的，程式碼執行的順序還是上--中--下。為什麼會先執行下面的程式碼呢？那是因為ajax非同步請求，需要時間，而js並沒有去等待，所以這裡有一個時間差。
四、解決方法
1. 把實際要操作的動作放到回呼函數中，逃避這個時間差
<script type="text/javascript">
function test(value){
$.ajax({
type: "POST",
url: "test.php",
data: "name="+value,
success: function(msg){
$("div").remove(); //实际要操作的动作
}
});
}
test("good");
</script>
前面幾個例子，是為了舉例，真正寫程式碼，不會那樣寫，哈哈。
2. 進行同步請求
<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>
當你刷新頁面時，這裡是彈出二個true,為什麼會這樣呢？加了async:false後，就會有一個等待的過程，也就是說ajax不執行完，不執行下面的程式碼。用這個方法有個問題，如果等待的時間太長，使用者體驗很不好的。
更多關於jQuery ajax相關內容有興趣的讀者可查看本站專題：《jquery中Ajax用法總結》
希望本文所述對大家jQuery程式設計有所幫助。