学习 Javascript/Jquery promise&deferred，$.when 多次使用时出现问题

Question

    //just a function to simulate, ajax etc.
    function wait () {

        var deferred = $.Deferred();
        console.log('hello')setTimeout(deferred.resolve,3000);
        return deferred.promise();
    }

    var func = function () {

        var first,before,after,resolvePromise,main;
        var beforeList = [];
        var afterList = [];
        var def = new $.Deferred();

        //push to array function
        first = function () {

            beforeList.push(wait);  
            beforeList.push(wait);
            afterList.push(wait);
            console.log('first done', beforeList,afterList)
        }

        //this must run before the main
        before = function () {

            var beforeDef = new $.Deferred();

            $.when.apply($,beforeList).done(function () {
                console.log('before', new Date().getTime())
                beforeDef.resolve();
            });

            return beforeDef.promise();
        }

        //this must run after main
        after = function () {

            var afterDef = new $.Deferred();

            $.when.apply($,afterList).done(function () {
                console.log('after', new Date().getTime())
                afterDef.resolve();
            });

            return afterDef.promise();
        }

        // this is main function
        main = function () {
            console.log('doing job in main function', new Date().getTime())
        }

        //handler
        resolvePromise = function () {
            def.resolve();
            return def.promise();
        }

        //action
        var step = def.then(first);
        var step1 = step.then(before);
        var step2 = step1.then(main);
        var step3 = step2.then(after)
        .done(function () {
            console.log('all done')
        });
        resolvePromise();
    }
func();

我刚刚开始学习 promise&deferred。这是我的代码。我的主要目标是“创建两个充满功能的数组”。 afterList 和 beforeList 是哪个名字。我想在我的主要功能之前和之后运行它们。

我的主要问题是我无法使 $.when() 中的列表工作。

Answer 1

传递给$.when 的列表必须是promise 之一，而不是调用时会产生它们的函数之一。你需要自己触发waits：

function first() {
    beforeList.push(wait());  
    beforeList.push(wait());
    afterList.push(wait());
    console.log('first done', beforeList,afterList)
}

另外，我不会依赖全局变量beforeList/afterList。您应该构建列表（并启动任务）并一步应用$.when。

并且不要经常构造 Deferreds（def、beforeDef、afterDef）。 Promise 的主要优点是它们的可链接性，您不需要手动解决它们中的任何一个。您很容易忘记处理错误并将其传递，如果您只是重用 Promise 或调用 then 来传递函数，这是自动化的。

function before() {
    var beforeList = [];
    beforeList.push(wait());
    beforeList.push(wait());

    var beforeProm = $.when.apply($, beforeList);
    beforeProm.done(function () {
        console.log('before', new Date().getTime())
    });
    return beforeProm;
}
// same thing, coded simpler:
function after() {
    var afterList = [ wait() ];

    return $.when.apply($, afterList).done(function () {
        console.log('after', new Date().getTime())
    });
}

function main() {
    console.log('doing job in main function', new Date().getTime())
    return undefined; // the results of the main job which
                      // after needs to wait for
}

// action - without an extra "handler"
before().then(main).then(after).done(function () {
    console.log('all done')
});