学习Javascript/Jquery promise&deferred，问题与$.当多次使用时

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();

我剛剛開始學習承諾和延遲。这是我的代码。我的主要目标是"创建两个充满功能的数组"。哪个名称在列表之后和列表之前。我想在我的主函数之前和之后运行它们。

我

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

Answer 1

传递给

$.when的列表必须是承诺之一，而不是在调用时将产生它们的函数之一。您需要自己触发wait：

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

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

并且不要经常构造延迟（def，beforeDef，afterDef）。承诺的主要优点是它们的链性，您不需要手动解决其中任何一个。你太容易忘记处理错误并传递它们，如果你只是重用承诺或调用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')
});