处理 jquery promise 时函数序列未按预期执行

Question

我有一些代码，我想在函数完成后执行这些代码，单击按钮将调用这组步骤和函数。以下是我的代码：

$scope.activetab = function (tabname, $event) {
   $.when(function () {
        showLoader();
        alert('done');
   }).done(function () {
        alert('next');
        if (tabname == 'General')
             $scope.GeneralAct = true;
        else if (tabname == 'Contact Information')
             $scope.ContactAct = true;
        else if (tabname == 'Position/Hierarchy')
             $scope.PositionAct = true;
        else if (tabname == 'Ids and Program Access')
             $scope.IdsAct = true;
        else if (tabname == 'Equipment')
             $scope.EquipmentAct = true;
        else if (tabname == 'Licensing')
            $scope.LicensingAct = true;
    });
};

我的showLoader函数如下：

function showLoader() {
    var dfd = $.Deferred();
    $('body').append('<div class="loader"></div>');
    dfd.promise();
}

但是这里alert('next') 先被执行，然后alert('done') 被执行。这里的实际问题是什么？我不太确定承诺在这里的工作方式！谁能告诉我如何纠正这个问题？

Answer 1

$.when() 无法正常工作，因为您没有从传递它的函数返回承诺。但是，showLoader() 不是异步的，所以根本不需要使用 Promise。

由于您的代码中没有显示异步操作，您可以像这样同步编程：

$scope.activetab = function (tabname, $event) {
        showLoader();
        if (tabname == 'General')
             $scope.GeneralAct = true;
        else if (tabname == 'Contact Information')
             $scope.ContactAct = true;
        else if (tabname == 'Position/Hierarchy')
             $scope.PositionAct = true;
        else if (tabname == 'Ids and Program Access')
             $scope.IdsAct = true;
        else if (tabname == 'Equipment')
             $scope.EquipmentAct = true;
        else if (tabname == 'Licensing')
            $scope.LicensingAct = true;
};

function showLoader() {
    // this is a synchronous operation, so no need for promises here
    $('body').append('<div class="loader"></div>');
}

---

如果showLoader() 内部有异步操作，那么要将它与$.when() 一起使用，您必须做三件您目前没有做的事情：

1. 您必须返回来自showLoader() 的承诺。
2. 当showLoader() 完成时，您必须履行该承诺。
3. 您必须将该承诺传递给 $.when()。

$.when() 通过向其传递一个或多个 Promise 来处理异步操作，然后它会监控这些 Promise 何时得到解决，并且仅当您传递给它的所有 Promise 都已解决时才解决它自己的 Promise。

---

由于现在看来您要解决的真正问题是如何在其他代码运行之前强制重新绘制，您可以在此答案中看到如何做到这一点：When does the DOM repaint during Javascript routines?