本文實(shí)例分析了jQuery ajax時(shí)間差導(dǎo)致的變量賦值問題。分享給大家供大家參考，具體如下：
ajax異步請求，在各種特效方面，做出了不少的貢獻(xiàn)，有了它讓用戶體驗(yàn)更好。下面說一下曾今遇到過的一個(gè)問題，今天又遇到了，又花了我一點(diǎn)時(shí)間，小問題，但是特別容易忽視，并且不容易想到是什么原因產(chǎn)生的。廢話不多說，舉個(gè)例子大家就明白了。
一、準(zhǔn)備測試文件test.php和test.html
1. test.php
<?phpecho "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>m.survivalescaperooms.com</div></body></html><script type="text/javascript">//js代碼放到這里</script>
二、問題舉例
<script type="text/javascript">function test(value){ //定義一個(gè)function error = false; //定義一個(gè)測試變量 $.ajax({ //ajax異步請求 type: "POST", //傳值方式post url: "test.php", //異步請求的文件 data: "name="+value, //異步請求的參數(shù) success: function(msg){ //請求成功的回調(diào)函數(shù) if($.trim(msg) == '1'){ error = true; //返回值為1，把error變成true } } }); alert(error); //打印一下error的內(nèi)容，在這里你知道它會彈出什么嗎？ if(error == true){ $("div").remove(); }}test("good");</script>代碼中的alert(error);不管msg返回什么，都只會彈出false，按javascript的執(zhí)行原理，一般情況下都是順序執(zhí)行的，那為什么這個(gè)error的值沒有被改變呢？原因就在于異步請求是有一個(gè)時(shí)間差的，為了驗(yàn)證這個(gè)時(shí)間差，在舉個(gè)例子，可以讓你清楚的看到，這個(gè)時(shí)間差。
三、驗(yàn)證ajax異步請求的時(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)你刷新頁面后，問題就很清楚，它首先彈出的是false,然后彈出了true，二次彈出之間的時(shí)間差，就是ajax異步請求的時(shí)間差。從表面上看，這段js代碼的執(zhí)行順序是這樣的上--下--中，其實(shí)不是這樣的，代碼執(zhí)行的順序還是上--中--下。為什么會先執(zhí)行下面的代碼呢？那是因?yàn)閍jax異步請求，需要時(shí)間，而js并沒有去等待，所以在這里有一個(gè)時(shí)間差。
四、解決方法
1. 把實(shí)際要操作的動作放到回調(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í)際要操作的動作 } });}test("good");</script>前面幾個(gè)例子，是為了舉例，真正寫代碼，不會那樣寫，哈哈。
2. 進(jìn)行同步請求
<script type="text/javascript">function test(value){ error = false; $.ajax({ type: "POST", url: "test.php", async: false, //進(jìn)行同步請求，默認(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)你刷新頁面時(shí)，這里是彈出二個(gè)true,為什么會這樣呢？加了async:false后，就會有一個(gè)等待的過程，也就是說ajax不執(zhí)行完，不執(zhí)行下面的代碼。用這個(gè)方法有個(gè)問題，如果等待的時(shí)間過長，用戶體驗(yàn)很不好的。
更多關(guān)于jQuery ajax相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
