javascript - 我如何从这个 jsFiddle 动态添加一个延迟到 promise 中？

Question

关于 this jsFiddle ，我正在尝试动态添加一个在事件触发时创建的“延迟”，因此仅当所有延迟都已解决时才调用完成回调，包括后来添加的那些:

相关代码:

var promises = [ deferred1, ... ];
var p = when.all(promises).then(function() {
  console.log('All done!!');
  //! trigger
});

promises.push( deferredFromEvent ); // << ignored

更新: 欢迎使用 Q 或 jQuery 的建议，我正在寻找一个可行的

Answer 1

将您的固定 promise 视为一个独立的包，而不是动态的。

等待捆绑的 promise ，然后 pipe它们的组合结果通过一个最初为空的数组的 $.when() 得到。您可以随时将新 promise 动态推送到此数组中。

http://jsfiddle.net/atesgoral/YVkVa/1/

HTML:

<p>You have 5 seconds to inject!</p>
<button id="inject">Inject Deferred 3</button>
<button id="resolve">Resolve Deferred 3</button>
<p>Deferred 1: <span id="dfd1">pending<span></p>
<p>Deferred 2: <span id="dfd2">pending<span></p>
<p>Deferred 3: <span id="dfd3">pending<span></p>
<h1 id="result"></h1>

JavaScript:

var dfd1 = $.Deferred(),
    dfd2 = $.Deferred(),
    fixed = [ dfd1.promise(), dfd2.promise() ],
    multiplexed = $.when.apply($, fixed), // Bundle the fixed ones
    reservoir = []; // Reservoir for dynamic promises

// The solution to your problem lies here. The rest is scaffolding.
var ultimate = multiplexed.pipe(function () {
    return $.when.apply($, reservoir);
});

ultimate.done(function() {
    $("#result").text("Done!");
});

window.setTimeout(function () {
    dfd1.resolve();
    $("#dfd1").text("resolved");
}, 2500);

window.setTimeout(function () {
    dfd2.resolve();
    $("#dfd2").text("resolved");
}, 5000);

var dfd3 = $.Deferred();

$("#inject").click(function () {
    reservoir.push(dfd3.promise());
});

$("#resolve").click(function () {
    dfd3.resolve();
    $("#dfd3").text("resolved");
});