Jquery Deferred 没有到达最后一个.then

Question

我有一系列必须执行的函数。除了最后一个之外，它们都按顺序执行。 d1 执行，d2 执行，d3 执行，然后 done 函数中的代码在 d4 解析之前执行。想不通为什么。任何帮助将不胜感激。

$(document).ready(function() {
    var d1 = functiond1();
    var d2 = functiond2();
    var d3 = functiond3();
    var d4 = functiond4();

    d1.then(d2).then(d3).then(d4).done(function() {

    //Code here does not wait for d4 to end before executing
    //HELP! 

    });
});

function functiond1() {
    var dfd = $.Deferred();

    //Do stuff here
    //Works in sequence

    dfd.resolve();
    return dfd.promise();
}


function functiond2() {

    var dfd = $.Deferred();
    params = jQuery.param({
        'parm1': 1,
        'parm2': 2,
        'parm3': 3
    });


    jQuery.getJSON($.webMethoJSONGet1, params).done(function(data) {

        //Do stuff here
        //Works in sequence

        dfd.resolve();

    });

    return dfd.promise();
}

function functiond3() {
    var dfd = $.Deferred();

    //Do stuff here
    //Works in sequence

    dfd.resolve();
    return dfd.promise();
}

function functiond4() {

    var dfd = $.Deferred();

    params = jQuery.param({
        'parm1': 1,
        'parm2': 2,
        'parm3': 3
    });

    jQuery.getJSON($.webMethoJSONGet2, params).done(function(data) {

        //Do stuff here
        //does not work in sequence

        dfd.resolve();

    });

    return dfd.promise();
}

Answer 1

很难说你想用这些承诺做什么。您首先调用所有 4 个函数，然后尝试使用一堆 then 回调将它们链接起来。如果您想将它们按顺序链接在一起，则应如下所示：

functiond1()
.then(functiond2)
.then(functiond3)
.then(functiond4)
.done(function() { /* blah */ });

如果你只想要一个结果，你可以使用$.when

$.when(functiond1(), functiond2(), functiond3(), functiond4())
.then(function(resultd1, resultd2, resultd3, resultd4) { /* blah */ });

另一方面，在您的函数中，您创建的 Promise 会在另一个不必要的 Promise 的 done 回调中解析。 $.getJSON.done() 调用本身返回一个承诺，因此不需要额外的承诺。只需返回从done() 返回的承诺。

抱歉，我对 jQuery 延迟对象并没有搞砸太多，但它们看起来与标准 Promises 足够相似。

Answer 2

要按顺序运行函数，您需要将引用传递给.then链中的函数，而不是调用这些函数的结果。 p>

例如

var d1 = functiond1;   // NB: no ()
...

d1.then(d2).then(d3).then(d4).done(...);    
functiond1().then(functiond2).then(functiond3).then(functiond4).done(...)

问题的最终原因是立即调用d4 将导致其已解决的承诺立即传递给.done，而不管.then 链的早期部分的状态如何。

你也不应该用额外的 Promise 包装你的 JSON 函数，因为 $.getJSON 已经返回了一个 Promise，如果 AJAX 查询失败，该 Promise 将被拒绝：

function functiond4() {
    ...
    return $.getJSON(...);
}

Answer 3

我在一个项目中遇到了同样的问题，这个带有数组的解决方案效果很好：

$(document).ready(function() {
    var pr = [];
    var d1 = functiond1();
    var d2 = functiond2();
    var d3 = functiond3();
    var d4 = functiond4();

    function functiond1() {
        var dfd = $.Deferred();
        pr.push(dfd);

        setTimeout(function(){
            $('body').append('1 resolved <br>');
            dfd.resolve();
        }, 2000);
    }


    function functiond2() {
        var dfd = $.Deferred();
        pr.push(dfd);

        params = jQuery.param({
            'parm1': 1,
            'parm2': 2,
            'parm3': 3
        });

        setTimeout(function(){
            $('body').append('2 resolved <br>');            
            dfd.resolve();
        }, 3000);
    }

    function functiond3() {
        var dfd = $.Deferred();
        pr.push(dfd);

        setTimeout(function(){
            $('body').append('3 resolved <br>');
            dfd.resolve();
        }, 1000);
    }

    function functiond4() {
        var dfd = $.Deferred();
        pr.push(dfd);

        params = jQuery.param({
            'parm1': 1,
            'parm2': 2,
            'parm3': 3
        });

        setTimeout(function(){
            $('body').append('4 resolved <br>');
            dfd.resolve();
        }, 50);
    }

    $.when.apply($, pr).then(function() {
        // do something
        $('body').append('proceed with code execution');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>