JQuery 函数返回承诺，但“何时”仍然不等待

Question

我刚刚了解了$.when().then() 功能。我一直在努力让它发挥作用，我已经看过很多例子，但我显然还没有完全理解，因为我无法让它发挥作用。我知道我作为参数传递给when() 函数的任何函数都必须返回一个promise 对象。我觉得我所做的应该有效，但它并没有那么清楚，我仍然不理解某些东西。在我下面的代码中，loadUserInterfaceGroupsDropDown() 在 initializeUserInterfaceGroups() 内部的 ajax 调用完成之前执行。请注意，我返回了 ajax 调用的结果。这应该会产生与我看到的许多将 ajax 调用作为参数传递给 when() 语句的简单示例相同的结果。我还在底部的 else 语句中返回了一个承诺。但由于这似乎不起作用，我显然误解了一些东西。请帮忙。

$.when(initializeUserInterfaceGroups()).then(loadUserInterfaceGroupsDropDown());

function initializeUserInterfaceGroups() {
    if (userInterfaceGroups === undefined) {
        // get the UserInterfaceGroups
        return $.ajax({
            type: "POST",
            url: "Users.aspx/GetUserInterfaceGroups",
            data: "{organizationId: " + $("#ddOrganization").val() + "}",
            datatype: "json",
            contentType: "application/json; charset=utf-8",
            success: function(response) {
                if (response.d.Success) {
                   userInterfaceGroups = response.d.UserInterfaceGroups;
                   //loadUserInterfaceGroupsDropDown();
                    renderCheckboxLists();
                } else {
                   alert(response.d.ErrorMessage);
                }
            },
            failure: function(response) {
               alert('Error getting the UserInterfaceGroups: ' + response.d);
            }
        });
    } else {
        return $.Deferred().promise();
    }
}

Answer 1

将.when() 和.then() 与多个ajax 函数一起使用的正确语法如下：

$.when($.ajax(...), $.ajax(...)).then(function (resp1, resp2) {
    //this callback will be fired once all ajax calls have finished.
});

所以基本上你需要像上面那样改变你的调用方法。希望对您有所帮助！

Answer 2

这似乎不起作用 - 我显然误解了一些东西。

$.when(initializeUserInterfaceGroups()).then(loadUserInterfaceGroupsDropDown());

是的，有两件事：

• 当你已经有一个承诺时，你绝对不需要$.when。只有当你不确定调用的返回值是否是一个承诺，或者当你有多个承诺等待时，你才应该使用它。这里也不是。
• then 采用回调函数。您不能立即调用loadUserInterfaceGroupsDropDown()（这就是它不等待的原因）并将结果传递给then，您必须传递函数本身。 （或者至少将调用包装在函数表达式中）。

所以你的代码应该是这样的

initializeUserInterfaceGroups().then(loadUserInterfaceGroupsDropDown);

Answer 3

我想我会更新我所做的。我仍在学习有关如何最好地使用它的新事物。最后，它仍然是我需要的完美答案，但我确实必须改变一些事情。有人指出，我在我的一个 ajax 调用中的 else 语句中返回了一个未解决的承诺。 虽然这似乎暂时对我有用，但这是我需要进一步研究的东西。这是我的工作代码，希望它对某人有所帮助。我这样做是因为即使得到了正确的答案，我仍然需要弄清楚一些事情，所以希望这会对某人有所帮助：

$.when(getUserInterfaceGroups(), getUserDetail($(this).attr("data-userId"))).done(function(resp1, resp2) {
    renderUserInterfaceGroupControls(resp1[0], resp2[0]);
    populateForm(resp2[0]);
});

function getUserInterfaceGroups() {
    if (userInterfaceGroups === undefined) {
        return $.ajax({
            type: "POST",
            url: "Users.aspx/GetUserInterfaceGroups",
            data: "{organizationId: " + $("#ddOrganization").val() + "}",
            datatype: "json",
            contentType: "application/json; charset=utf-8",
            failure: function(response) {
                alert('Error getting the UserInterfaceGroups: ' + response.d);
            }
        });
    } else {
        return $.Deferred().promise();
    }
}

function getUserDetail(userId) {
    return $.ajax({
        type: "POST",
        url: "Users.aspx/GetUser",
        data: "{userId: " + userId + "}",
        datatype: "json",
        contentType: "application/json; charset=utf-8",
        failure: function (response) {
            alert('Error getting the User details: ' + response.d);
        }
    });
}

function renderUserInterfaceGroupControls(resp1, resp2) {
    if (resp1.d.Success && resp2.d.Success) {
        userInterfaceGroups = resp1.d.UserInterfaceGroups;
        loadUserInterfaceGroupsDropDown(resp2.d.UserDetail.InterfaceModeId);
        renderCheckboxLists();
    } else {
        alert(response.d.ErrorMessage);
    }
}

function populateForm(response) {
    if (response.d.Success) {
        var userDetails = response.d.UserDetail;
        $("#txtUserCode").val(userDetails.UserCode);
        $("#txtName").val(userDetails.Name);
        $("#txtPassCode").val(userDetails.PassCode);
        $("#ddUserInterfaceGroup option[value='" + userDetails.UserInterfaceGroupId + "']").prop("selected", true);
        $("#txtEmail").val(userDetails.Email);
        $("#dtBirthDate").val(userDetails.DateOfBirth);
        $.each(userDetails.ContactGroupIds, function (idx) {
            $("div input[type=checkbox][value=" + userDetails.ContactGroupIds[idx] + "]").prop('checked', true);
        });
        if (userDetails.AssetTagNumber === "") {
            $("#rbUserOwned").prop("checked", "checked");
        } else {
            $("#txtAssetTag").val(userDetails.AssetTagNumber);
        }
        $("#hidUserId").val(userDetails.Id);
        showInputFields();
    } else {
        alert(response.d.ErrorMessage);
    }
}