从具有延迟的数组顺序执行生成（jquery）

Question

有没有办法使用其他解决方案使这个更优雅（jquery 很好）？

在我的情况下重要的是，只有在先前的执行被终止时才会触发相应的执行。

seqExe(["item one", "item two", "item three", "item four", "item five"])

function seqExe(corpus) {
    var i = -1,
        len = corpus.length,
        defer = jQuery.Deferred(),
        promise = defer.promise();

    while(++i < len) {
        promise = promise.then((function(item) {
            return function() {
                console.log(item);
                return foo(item);
            }
        }).call(this, corpus[i]));
    }

    promise.then(function() {
        console.log("Done");
    }, function() {
        console.error("Failed");
    });

    return defer.resolve();
}

function foo(item) {
    var defer = jQuery.Deferred();
    window.setTimeout(
        function() {
            defer.resolve()
            console.log(item);
        }, Math.random() * 2000 + 1000);

    return defer.promise();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

假设的输出应该是：

item one
item one
item two
item two
item three
item three
item four
item four
item five
item five
Done

Answer 1

这是使用reduce 的理想选择。此外，您的初始承诺（您想立即解决）可以只是 $.when()，并将成为 reduce 调用的起始值：

seqExe(["item one", "item two", "item three", "item four", "item five"])

function seqExe(corpus) {
    return corpus.reduce(function (p, item) {
        return p.then(function () {
            console.log(item + ' pending');
            return foo(item);
        });
    }, $.when())
    .then(function(){
        console.log("Done");
    }, function(){
        console.log("Failed");
    });
}

function foo(item) {
    var defer = new $.Deferred();
    window.setTimeout(
        function() {
            defer.resolve()
            console.log(item + ' resolved');
        }, Math.random() * 2000 + 1000);
    return defer.promise();
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

请注意，在某些 jQuery 版本中（我在 2.1.1 中看到了这一点）then 回调是同步执行的，这会给出错误的输出顺序。这是在 jQuery 3 中修复的（我尝试了 3.1.1，我也在上面的 sn-p 中链接到）。

以下是使用原生 ES6 承诺的方法：

seqExe(["item one", "item two", "item three", "item four", "item five"])

function seqExe(corpus) {
    return corpus.reduce(function (p, item) {
        return p.then(function () {
            console.log(item + ' pending');
            return foo(item);
        });
    }, Promise.resolve())
    .then(function(){
        console.log("Done");
    }, function(){
        console.log("Failed");
    });
}

function foo(item) {
    return new Promise(function (resolve) {
        window.setTimeout(function() {
            resolve();
            console.debug(item + ' resolved');
        }, Math.random() * 2000 + 1000);
    });
}