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

標籤：style   color   使用   資料   io   for   

 

註：轉載請在顯著地方標註來源

有時候在一個業務事件處理流程上，可能會遇到點擊了一個按鈕或者其他事件觸發了一個動作 需要執行兩個以上的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; }