JQuery 嵌套 $.when 以防止竞争条件答案

【问题标题】：JQuery nested $.when to prevent race conditionsJQuery 嵌套 $.when 以防止竞争条件
【发布时间】：2015-09-29 15:30:44
【问题描述】：

所以我阅读了几篇关于如何执行此操作的帖子，例如 this 和 this，但我选择了其他似乎适用于此内部 LOB 应用程序的内容。在加载现有的“分配”之前，我遇到了异步加载数据库依赖项的问题（即，它在加载部门、部门等之前尝试加载 getAllocation()、getAssignedAssts() 等），所以我只放了第二个 $.依赖关系的 doneCallback 内的 when/done 调用。像这样：

// assume allocationID is defined as allocation id we want to get from db
$.when(getDept(), getDivisions(), GetAvailComments(), getTargets())
.done(function msg1, msg2, msg3, msg4) {
    // initialize variables, knockout observables and observable arrays

    $.when(getAllocation(allocationID), getAssignedAssts(allocationID), getAssignedTeachers(allocationID))
    .done(function msg1, msg2, msg3) {
    });
})
.fail(function jqXHR, textStatus, errorThrown) {
    alert('Error getting Allocation: ' + jqXHR.status + ' ' + textStatus + ', ' + errorThrown + '<br />' + jqXHR.responseText);
});

假设 getDept()、getDivisions() 等存在并返回这样的 ajax 承诺：

function getDept() {
    var data = { plan_id: getParameterByName('plan_id') };

    return $.ajax({
        type: "POST",
        url: "Plan_Edit.aspx/PlanDept",
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    });
};

我的问题是这是否不好，如果是，那么“正确”的做法是什么？

【问题讨论】：

有人吗？只要确保这没问题..

标签： jquery

【解决方案1】：

我在 Google 上搜索了“jQuery 嵌套时间”并找到了 this，我以此为起点将其改写为 this jsfiddle。我在上面实现的代码似乎很好，如本示例所示 - 第二个 when/then 中的 jquery 调用在第一个集合完成之前不会被调用，这正是我认为由于依赖关系而想要的。这是javascript代码：

function message(html) {
    $('<div/>').html(html).appendTo($('body'));
}

function process(){  
    $.when(a1(), a2()).done(function(){
    message('a1 and a2 complete');

    $.when(a3(), a4()).done(function(){
        message('a3 and a4 complete');  
    });
    });
}

function a1(){
    var dfd = $.Deferred();        
    setTimeout(function(){ message("a1 done"); dfd.resolve();  },4000);    // can use console.log or message
    return dfd.promise();         
}

function a2(){
    var dfd = $.Deferred();
    setTimeout(function(){ message("a2 done"); dfd.resolve();  }, 2500);
    return dfd.promise();
}

function a3(){
    var dfd = $.Deferred();
    setTimeout(function(){ message("a3 done"); dfd.resolve();  }, 3000);
    return dfd.promise();
}

function a4(){
    var dfd = $.Deferred();
    setTimeout(function(){ message("a4 done"); dfd.resolve();  }, 2000);
    return dfd.promise();
}

process();

【讨论】：