快捷導(dǎo)航

jQuery ajax時(shí)間差導(dǎo)致的變量賦值問(wèn)題分析

更新時(shí)間：2016年01月22日 11:22:22 作者：張映

這篇文章主要介紹了jQuery ajax時(shí)間差導(dǎo)致的變量賦值問(wèn)題,結(jié)合實(shí)例對(duì)比分析了jQuery的ajax調(diào)用中出現(xiàn)的時(shí)間差賦值問(wèn)題原因與解決方法,需要的朋友可以參考下

本文實(shí)例分析了jQuery ajax時(shí)間差導(dǎo)致的變量賦值問(wèn)題。分享給大家供大家參考，具體如下：

ajax異步請(qǐng)求，在各種特效方面，做出了不少的貢獻(xiàn)，有了它讓用戶體驗(yàn)更好。下面說(shuō)一下曾今遇到過(guò)的一個(gè)問(wèn)題，今天又遇到了，又花了我一點(diǎn)時(shí)間，小問(wèn)題，但是特別容易忽視，并且不容易想到是什么原因產(chǎn)生的。廢話不多說(shuō)，舉個(gè)例子大家就明白了。

一、準(zhǔn)備測(cè)試文件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>chabaoo.cn</div>
</body>
</html>
<script type="text/javascript">
//js代碼放到這里
</script>

二、問(wèn)題舉例

<script type="text/javascript">
function test(value){ //定義一個(gè)function
 error = false; //定義一個(gè)測(cè)試變量
 $.ajax({ //ajax異步請(qǐng)求
 type: "POST", //傳值方式post
 url: "test.php", //異步請(qǐng)求的文件
 data: "name="+value, //異步請(qǐng)求的參數(shù)
 success: function(msg){ //請(qǐng)求成功的回調(diào)函數(shù)
 if($.trim(msg) == '1'){
 error = true; //返回值為1，把error變成true
 }
 }
 });
 alert(error); //打印一下error的內(nèi)容，在這里你知道它會(huì)彈出什么嗎？
 if(error == true){
 $("div").remove();
 }
}
test("good");
</script>

代碼中的alert(error);不管msg返回什么，都只會(huì)彈出false，按javascript的執(zhí)行原理，一般情況下都是順序執(zhí)行的，那為什么這個(gè)error的值沒(méi)有被改變呢？原因就在于異步請(qǐng)求是有一個(gè)時(shí)間差的，為了驗(yàn)證這個(gè)時(shí)間差，在舉個(gè)例子，可以讓你清楚的看到，這個(gè)時(shí)間差。

三、驗(yàn)證ajax異步請(qǐng)求的時(shí)間差

<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>

當(dāng)你刷新頁(yè)面后，問(wèn)題就很清楚，它首先彈出的是false,然后彈出了true，二次彈出之間的時(shí)間差，就是ajax異步請(qǐng)求的時(shí)間差。從表面上看，這段js代碼的執(zhí)行順序是這樣的上--下--中，其實(shí)不是這樣的，代碼執(zhí)行的順序還是上--中--下。為什么會(huì)先執(zhí)行下面的代碼呢？那是因?yàn)閍jax異步請(qǐng)求，需要時(shí)間，而js并沒(méi)有去等待，所以在這里有一個(gè)時(shí)間差。

四、解決方法

1. 把實(shí)際要操作的動(dòng)作放到回調(diào)函數(shù)中，逃避這個(gè)時(shí)間差

<script type="text/javascript">
function test(value){
 $.ajax({
 type: "POST",
 url: "test.php",
 data: "name="+value,
 success: function(msg){
 $("div").remove(); //實(shí)際要操作的動(dòng)作
 }
 });
}
test("good");
</script>

前面幾個(gè)例子，是為了舉例，真正寫(xiě)代碼，不會(huì)那樣寫(xiě)，哈哈。

2. 進(jìn)行同步請(qǐng)求

<script type="text/javascript">
function test(value){
 error = false;
 $.ajax({
 type: "POST",
 url: "test.php",
 async: false, //進(jìn)行同步請(qǐng)求，默認(rèn)是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>

當(dāng)你刷新頁(yè)面時(shí)，這里是彈出二個(gè)true,為什么會(huì)這樣呢？加了async:false后，就會(huì)有一個(gè)等待的過(guò)程，也就是說(shuō)ajax不執(zhí)行完，不執(zhí)行下面的代碼。用這個(gè)方法有個(gè)問(wèn)題，如果等待的時(shí)間過(guò)長(zhǎng)，用戶體驗(yàn)很不好的。

更多關(guān)于jQuery ajax相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: