如何确保 .then() 中的函数在继续之前完成？

如何解决如何确保 .then() 中的函数在继续之前完成？

下面是$.when().then().

    $.when(setLineDet(rptId,rptLn)).then(function(data) {
        console.log("done setting line details");
        setHeaderDet(rptId);
        }).then(function(data) {
            console.log("done setting header details");
            setOtherDet();
        }).then(function(data) {
            console.log("done setting other details");
        });

setLineDet() 的代码：

function setLineDet(id,ln) { //set line details
    funcSel = "get_ln_det";
    var passVar = funcSel+"~@"+id+"~@"+ln;
    
    var def = new $.Deferred();
    
    ajaxCall(passVar).done(function(data) {
        var lnData = data.trim().split("~@");
        
        $("#lnDesc").val(lnData[2]);
        $("#lnDesc2").val(lnData[3]);
        $("#lnDesc3").val(lnData[4]);
        $("#lnDesc4").val(lnData[5]);
        $("#lnDesc5").val(lnData[6]);
        $("#lnDesc6").val(lnData[7]);
        $("#lnDesc7").val(lnData[8]);
        $("#lnDesc8").val(lnData[9]);
        $("#lnDesc9").val(lnData[10]);
        $("#lnDesc10").val(lnData[11]);
        $("#lnDesc11").val(lnData[12]);
        
        $.when(setRptLnList(lnData[0])).done(function(data) {
            def.resolve("done");
        });
    });
    
    return def.promise();
}

setHeaderDet() 的代码：

function setHeaderDet(id) { //set header details
    console.log("header 1");
    
    funcSel = "get_hdr_det";
    var passVar = funcSel+"~@"+id;
    
    var def = new $.Deferred();
    
    ajaxCall(passVar).done(function(data) {
        console.log("header 2");
        var hdrData = data.trim().split("~@");
        
        $("#hdr").val(hdrData[2]);
        $("#hdr2").val(hdrData[3]);
        $("#hdr3").val(hdrData[4]);
        $("#hdr4").val(hdrData[5]);
        $("#hdr5").val(hdrData[6]);
        $("#hdr6").val(hdrData[7]);
        $("#hdr7").val(hdrData[8]);
        $("#hdr8").val(hdrData[9]);
        $("#hdr9").val(hdrData[10]);
        $("#hdr10").val(hdrData[11]);
        
        var hasValue = 0;
        var doneSetOpr = 0;
        
        for(var i=6; i<12; i++) {
            if(hdrData[i]!="") { hasValue++; }
        }
        
        if(hdrData[6]!=""){
            $.when(setDesc("desc1",hdrData[6])).done(function(data) {
                console.log("set desc1");
                doneSetOpr++;
            });
        }
        if(hdrData[7]!=""){
            $.when(setDesc("desc2",hdrData[7])).done(function(data) {
                console.log("set desc2");
                doneSetOpr++;
            });
        }
        if(hdrData[8]!=""){
            $.when(setDesc("desc3",hdrData[8])).done(function(data) {
                console.log("set desc3");
                doneSetOpr++;
            });
        }
        if(hdrData[9]!=""){
            $.when(setDesc("desc4",hdrData[9])).done(function(data) {
                console.log("set desc4");
                doneSetOpr++;
            });
        }
        if(hdrData[10]!=""){
            $.when(setDesc("desc5",hdrData[10])).done(function(data) {
                console.log("set desc5");
                doneSetOpr++;
            });
        }
        if(hdrData[11]!=""){
            $.when(setDesc("desc6",hdrData[11])).done(function(data) {
                console.log("set desc6");
                doneSetOpr++;
            });
        }
        
        console.log("header 3");
        console.log("hasValue: "+hasValue+",doneSetOpr: "+doneSetOpr);
        
        if(doneSetOpr==hasValue && hasValue>0) {
            console.log("doneSetOpr==hasValue");
            def.resolve("done");
        }
    });
    
    console.log("header 4");
    return def.promise();
}

ajaxCall() 代码：

function ajaxCall(passValues) {
    return $.ajax({
        type: "POST",url: "processes.jsp",data: {passValues: passValues}
    });
}

控制台输出：

line 1
line 4
line 2
line 3
done setting line details
header 1
header 4
done setting header details
done setting other details
header 2
header 3
hasValue: 3,doneSetOpr: 0
set desc1
set desc2
set desc3

如您所见，setLineDet 函数已完成，然后才移至 setHeaderDet。但是，它没有完成 setHeaderDet 函数并立即移动到 setOtherDet。我真的不知道为什么，因为我对所有函数都使用相同的方法（创建 $.Deferred、.resolve()、.promise()）。
另外，我不明白为什么 doneSetOpr 值没有增加。由于该值不等于 hasValue，因此 .resolve() 未执行。所以我尝试删除 if 语句并只放置 .resolve()。它仍然导致相同的输出。

p.s 我的程序运行良好。这意味着没有错误，最终所有值都被准确设置，不会造成致命问题。我真的很想了解使用 promises 和 deferred 的正确方法，因为我可能使用错误，因为后续的 .then() 在继续下一个之前没有完成其中的功能。谢谢。

解决方法

要点：

你只需要返回在开始时已经创建的承诺，然后在 .then() 中返回承诺。而不是创建延迟对象，这最终会导致延迟反模式。
阅读并查看@Bergi 链接中的延迟反模式示例。

$.when(setLineDet(rptId,rptLn)).then(function(data) {
    console.log("done setting line details");
    return setHeaderDet(rptId);
    }).then(function(data) {
        console.log("done setting header details");
        return setOtherDet();
        }).then(function(data) {
            console.log("done setting other details");
        });