jQuery:多個AJAX/JSON請求對應單個回調並行加載

因為我們使用jQuery,這意味着需要調用 jQuery.getScript 和 jQuery.getJSON 函數。 我知道這些函數都是異步執行(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(
    $.getScript('/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絕對是與時俱進的!