Javascript - 控制流程

Question

我需要一些有关 javascript 中“控制流”最佳实践的帮助。在下面的示例中，我的 updateUI 函数无法正常工作，因为我的 saveData 函数尚未完成。

function save(data){
   saveData(data);
   updateUI();
}

为了临时修复，我这样做了

function save(data){
if(saveData(data)){
   updateUI();
   }
}

更新:这是我的 saveData 方法

function saveData(data){

$.ajax({
    url: url, // a variable, not important for this example
    data: data,
    type: "post",
    dataType: "json",
    success: function(data) { return true; },
    error: function(e) {
        console.log(e);
    }
})

我觉得我应该学习“标准”方式(如果存在的话)。

Answer 1

假设 saveData 正在调用 AJAX 函数(例如 $.ajax)，让它返回该 AJAX 函数的结果:

function saveData() {
    return $.ajax({
        url: url, // a variable, not important for this example
        data: data,
        type: "post",
        dataType: "json"
    }).fail(function(e) {
        console.log(e);
    });
}

然后使用 jQuery 延迟链接来更新 UI:

saveData().done(updateUI).fail(showError);

它可以让您避免将回调函数传递到您的 saveData 调用中，这样您就可以将数据保存逻辑与 UI 逻辑完全分离。

编辑我更新了代码，以展示如何包含也使用延迟对象的默认fail处理程序，但仍然返回promise 这样您就可以在外部处理 UI 更新。