關於多個Ajax請求執行返回先後的問題範例探討

韦小宝
發布: 2017-12-31 10:15:11
原創
1691 人瀏覽過

這篇文章主要與大家探討下關於多個Ajax請求執行返回先後的問題,對ajax感興趣的朋友可以參考下關於多個Ajax請求執行返回先後的問題範例探討文章

有時在一個業務事件處理流程上,可能會遇到點擊了一個按鈕或其他事件觸發了一個動作

需要執行兩個以上的Ajax請求,但是可能要顧慮到Ajax請求執行的先後順序,有時Ajax請求順序出問題,會導致各種問題

例如現在有兩個ajax事件,分別為ajax1 ,ajax2

一個叫做main的方法呼叫執行入口

1.


##

function main(){ ajax1(data,callback); ajax2(data,callback); }
登入後複製


如果我們按照上面的方法去執行,表面上看來是讓ajax1先執行,ajax2後再執行。如果不仔細想,有些人會認為ajax1先執行完,之後才會執行ajax2.事實上真的會如此嗎?


答案是 不一定 。當然對於有多個ajax請求對執行返回順序沒要求的情況,我們不需要過多考慮誰先執行,誰先返回的
那要是考慮ajax事件執行先後順序以及返回順序呢

要是這樣那怎麼解決ajax事件的執行返回先後順序呢

當然現在你應該會想到ajax
回調函數,Good,這是一個好主意現在按這種思路改變一下方法,方法如下



function main(){ ajax1( data , ajax2( ) ); }
登入後複製


這樣看起來,你是不是覺得Very Good呢?真的嗎?真的是Very Good嗎?


Maybe,But in some case ,這樣寫可能有些不方便,當然也許你可能不會遇到,但是我遇到了一種比較特殊的情況
比如下面這種可能



function main(){ aa(data); ajax1(data,callback); } function aa(val){ var data=val+"";//这里是对传入数据进行修改,封装,当然这里是随便写的 ajax2(data,ajax2Callback); } function ajax2Callback(){ console.log("=====回调函数ajax2Callback()执行========"); console.log("=====这里正在执行ajax执行完毕后必须执行的操作========"); }
登入後複製


你認為這個情況可以滿足ajax2在ajax1先執行並且先執行完畢嗎


#仔細想想你會發現得到答案

No!
Now ,How to solve this proplem . How to make sure ajax2 finished before ajax1 .

當然,你可能會說,這不簡單,把ajax1的調用放進ajax2方法回調方法ajax2Callback的最後面

不得不承認這是一種解決方案,但是如果是一個很古老的項目,已經做了好幾年的項目了。裡面呼叫複雜,要盡量避免修改以前的底層方法,也許你為了修改這個bug,就這樣簡單解決了,你可能又會創造多個bug.

那到底還有沒有好的方法去解決了?

Sure,solve it easy .但是工作經驗不足的人很少會一下想到,只會用前面的辦法草草解決問題,不管三七二十一。

而我採用了比較笨的方法,而且還存在一定問題,使用了setTimeOut
定時器執行一次,但是問題想必大家都知道,誰知道這個Ajax會執行多久了,還好有大神指導了下我,還記得對
數組排序嗎,說道這個,也許你會好奇,這與數組排序有啥關係。下面會告訴你答案
程式碼說明一切:


function main(){ var temp=ajax2Callback; ajax2Callback=function(){ temp(); ajax1(data,callback); } aa(data); ajax2Callback=temp; } function aa(val){ var data=val+"";//这里是对传入数据进行修改,封装,当然这里是随便写的 ajax2(data,ajax2Callback); } function ajax2Callback(){ console.log("=====回调函数ajax2Callback()执行========"); console.log("=====这里正在执行ajax执行完毕后必须执行的操作========"); }
登入後複製


看出來沒,是不是很有趣,沒有修改最低層的方法,僅僅修改了main方法,是不是很像數組排序裡的當我們比較兩個值大小時,不管你用

冒泡排序,還是快速排序,是不是都設定了一個臨時變數去儲存值。當然排序比較大小時,你可以沒必要設定臨時變量,僅僅用一個^運算符去做賦值比大小,甚至你可以偷懶到直接調用系統的Arrays.sort()方法,當然這都可以

function changeSearchContactType(obj) { if (!obj) { return; } var contactType = obj.value; var origRenderTemplate = renderTemplate; renderTemplate = function(data) { origRenderTemplate(data); ajaxAnywhere.submitAJAX('setSearchContactType'); } var result = TemplateHelper.changeSearchContactTemplate(contactType, contactUIUID); renderTemplate = origRenderTemplate; return result; }
登入後複製

以上就是這篇文章的所有內容了,希望對大家有幫助! !

相關推薦:

AJax實作類似百度搜尋列的功能

深入理解ajax系列第一篇之XHR物件

Ajax與使用者互動的JSON資料儲存格式

##

以上是關於多個Ajax請求執行返回先後的問題範例探討的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!