我在為 Mozilla Developer Network(Mozilla開發(fā)者社區(qū)) 寫代碼時需要加載的一個普通的的腳本文件,以及一個JSON流。因為我們使用jQuery,這意味著需要調(diào)用 jQuery.getScript 和 jQuery.getJSON 函數(shù)

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

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

復(fù)制代碼代碼如下:

$.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, 加載完成,此處我們可以執(zhí)行一些依賴操作。。。
});

當(dāng)資源加載完成, 指定的 done 或者 then 回調(diào)會觸發(fā),因此可以知道請求已經(jīng)完成。每個請求返回的回調(diào)參數(shù)對象類型不同,因此上述請求可能返回如下信息:

復(fù)制代碼代碼如下:

// 格式: [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]

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

復(fù)制代碼代碼如下:

$.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也可以這么做我還是相當(dāng)振奮的。對于現(xiàn)在的開發(fā),多個不同步且返回先后順序也不確定的請求共享同一個回調(diào)是很自然的需求,所以jQuery絕對是與時俱進(jìn)的!

您可能感興趣的文章: