元の問題は、一連の JS スクリプトを順番に、つまり 1 つずつロードすることでした。.then
(以前は )の優れた特性は、コールバックによって返された promise が解決されたときに、.pipe
によって返された新しい promiseが解決されることです。.then
小さな例:
var promiseA = promise.then(function() {
return promiseB; // assume this is defined somewhere
});
ここでpromiseA
は、一度解決するpromiseB
と解決されます。このプロパティを使用して、非同期関数を順次実行できます。3 つのスクリプト A、B、C を 1 つずつロードする場合は、次のようにします。
load(A).then(function() {
// executed when promise returned by load(A) is resolved
return load(B);
}).then(function() {
// executed when promise returned by load(B) is resolved
return load(C);
});
そして、それが上記のコードが行っていることであり、可変数のスクリプトに対してのみです。
// create a new deferred object
var deferred = new $.Deferred(),
// assign it to a new variables to keep a reference to the original deferred object
// so that we can resolve it later
pipe = deferred;
// iterate over an array of URLs
$.each(scripts , function(i, val) {
// for each URL do this
// overwrite the `pipe` variable with the new promise so that
// the next iteration can use the new promise
pipe = pipe.pipe(function() {
// this is executed when the (i-1)th script loaded
// load the ith script
return $.getScript(val);
});
});
// resolve the original (first) promise
deferred.resolve();
たぶん、ループがあなたを混乱させているのでしょう。固定数のスクリプトがある場合、次のようになります。
var deferred = new $.Deferred();
var pipe = deferred;
pipe = pipe.then(function() {
return $.getScript(scripts[0]));
});
pipe = pipe.then(function() {
return $.getScript(scripts[1]));
});
pipe = pipe.then(function() {
return $.getScript(scripts[2]));
});
deferred.resolve();