本文執行個體分析了jQuery ajax時間差導致的變數賦值問題。分享給大家供大家參考,具體如下:
ajax非同步請求,在各種特效方面,做出了不少的貢獻,有了它讓使用者體驗更好。下面說一下曾今遇到過的一個問題,今天又遇到了,又花了我一點時間,小問題,但是特別容易忽視,並且不容易想到是什麼原因產生的。廢話不多說,舉個例子大家就明白了。
一、準備測試檔案test.php和test.html
1. test.php
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程式設計有所協助。