關於多個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;
 }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM