jQuery when 使用方法

前言

幾乎現代的網頁都以ajax作為主要的設計方式，過去的form表單元素使用的機會越來越少，使用『非同步』ajax帶給我們許許多多的好處，例如傳送一個請求(request)到伺服器我們不需要像過去乖乖地等待回應(response)，因為它會在背後執行，當它完成時會自己呼叫callback函數，這樣更帶來了更好的用戶體驗。

問題

但是非同步也有個問題，假如有五個ajax請求分別處理不同的事情，假設有個功能是必須等到這五個請求通通都完成後才觸發，那我們該如何實作呢?可以在這五個ajax callback中加入一些flag然後不斷輪詢flag來判斷嗎?

解決辦法 $.fn.when(deffereds)

幸好jQuery在1.5版中提供了一個when()方法，這個方法可以解決上述的問題，要如何使用呢?

在jQuery1.5把ajax系列方法都改寫，其中一項變化就是回傳值從XMLHttpRequest改成jqXHR物件，這個物件就是所謂的Deffered物件，Deffered物件可以用來處理某件事情處理的成功與否，若成功就執行resolve()，失敗則執行reject()。取得deffered物件的方法如下 // 這邊使用ajax系列方法的getJSON var deffered = $.getJSON("", function(){ // callback });
jQuery.fn.when方法接收一個或多個deffered物件，並提供done以及fail兩個callback來調用，當所有的ajax無誤的完成時done callback就會被執行，但這些之中若有任一失敗fail callback就會被執行。

我們將透過上述的方式將多個ajax獲得的多個deffered obecjt傳入when中，並在它們都完成後顯示完成的訊息，如下範例 : 
var ajax1 = getJSON("url.com", function(){}); var ajax2 = getScript("url2.com", function(){}); var ajax3 = ajax(""); $.when(ajax1, ajax2, ajax3) .done(function(){ // 當都成功時執行... }) .fail(function(){ // 處理失敗的事物... });

結論

透過jQuery.fn.when，我們可以有效的解決多個非同步無法統一同步處理的問題，讓我們在多個ajax中能夠有個統一的方法去使用。