使用jQuery中的when實作多個AJAX請求對應單一回呼的範例分享_jquery

 我知道這些函數都是非同步執行(asyncronously)並且會延遲一段時間返回,所以我想知道是否有一種方式,使我可以使用單個回調,並行地加載它們,就像JS加載器curljs 所做的那樣。 很幸運! 透過jQuery.when, 我可以並發地加載兩個請求,只執行一次回調!

jQuery 腳本
正如我提到的,下面是加載腳本和一個JSON資源的用例:

複製代碼 程式碼如下:

$.when(
 $.getScript('/media/js/wiki-min.js?build=21eb633'),
 $.getJSON(' https://developer.mozilla.org/en-US/demos/feeds/json/featured/')
).then(function(a, b) {  // 或也可以使用".done"
 // Yay, 載入完成,這裡我們可以執行一些依賴操作。
當資源載入完成, 指定的 done 或 then 回呼會觸發,因此可以知道請求已經完成。 每個請求回傳的回調參數物件類型不同,因此上述請求可能回傳以下訊息:

複製程式碼

程式碼如下:// 格式: [response, state, jqxhr], [response, state, jqxhr]["(function(c){var e=c(".from-search-navigate" );if(e…;if(j){g.apply(m,l)}}}})(window,document,jQuery);", "success", Object]

[Array[15], "success", Object]

如果還需要增加一個傳統的AJAX XHR請求,比如說一個小部件模板,我們可以這樣做:

複製程式碼

程式碼如下:$.when( /media/js/wiki-min.js?build=21eb633'),  $.getJSON('https://developer.mozilla.org/en-US/demos/feeds/json/featured/'),

 $.get('/')

).then(function(a, b, c) {
 console.log(a, b, c);
});



Dojo Toolkit很早就有這類功能了,但jQuery也可以這麼做我還是相當振奮的。 對於現在的開發,多個不同步且返回先後順序也不確定的請求共享同一個回調是很自然的需求,所以jQuery絕對是與時俱進的!