为什么我的回调不会附加到此承诺链的末尾？

Question

I am losing my mind on this one.

All I want to do is chain an array of functions (sync and async), and have a callback when they are all done.

A simple chaining function like this

function promise_chain(fns, start) {
    return fns.reduce(function(previous, next) {
        return previous.then(next);
    }, start);
}

does work to sequence things, but I cannot for the life of me to get a callback to fire at the end of it. It returns the last in a chain of promises, which should take a then callback like any other. But such a callback gets fired after the first item in the chain.

Here is the fiddle.

http://jsfiddle.net/v6YCL/

It also includes a variant on that chaining function which confirms that the chain does have an end callback:

// This version prints the "resolved" message at the end as expected, but
// the message sequence is otherwise the same.
function wtf_promise_chain(fns, start) {
    var _chain = $.Deferred();

    $.when(fns.reduce(function(previous, next) {
        return previous.then(next);
    }, start).
           then(function() {
               message("chain resolved");
               _chain.resolve();
           }));
    return _chain;
}

Answer 1

You are missing a subtle point: when you explicitly return a promise from the then callbacks, the promise it returns in turn operates on that value.

To get your desired behavior you would need to write

wait(2000)
  .then(function() { starter.resolve(); return chain; })
  .then(function() { message("end, state is: " + chain.state()); });

Your current version (copying it here for completeness) reads

wait(2000)
  .then(starter.resolve)
  .then(function() { message("end, state is: " + chain.state()); });

and since starter.resolve returns starter , which has obviously just been resolved, the second .then causes the final message to be printed immediately.