Question

这样做有适当的方式/设计吗？或者我必须将它们组合成一个函数/事件，并将它们从Ajax返回的值中基于它？

我有一个包含两个更改事件/功能的下拉列表，如此，

$(document).ready(function () {
    $("#ddlFacilityDatabases").change(UpdateCategoriesList).change(UpdateReportsList);
}

这两个函数都修改了“#ddlCategories”和“#ddlReports”的选项。 UpdateCategoriesList（）修改我的“#ddlCategories”选项，UpdateReportsList（）修改我的“#ddlReports”选项。

这是我的一个功能（只发布一个，因为它们几乎相同，只是更改了几个位置和名称）

function UpdateCategoriesList() {

    // Disable the Dropdown.
    $("#ddlCategories").attr("disabled", true);

    // Get Selection Value.
    var Selection = {
        "FacilityDatabaseName": $("#ddlFacilityDatabases").val()
    };

    // Send JSON to /Select/getCategories/.
    $.ajax({
        url: "/Select/getCategories/",
        type: "GET",
        dataType: "html",
        data: Selection,
        success: function (response, textStatus, jqXHR) {
            // Parse Array.
            var Categories = JSON.parse(response).categories;

            // Clear Categories DropDownList.
            $("#ddlCategories").children("option").each(function () {
                if ($(this).val() != "") {
                    $(this).remove();
                }
            });

            // Add New Categories.
            var length = Categories.length;
            for (var i = 0; i < length; i++) {
                if (Categories[i] != null || Categories[i] != "") {
                    $("#ddlCategories").append("<option value=\"" + Categories[i] + "\">" + Categories[i] + "</option>");
                }
            }
        },
        complete: function () {
            // re-enable dropdownlist
            $("#ddlCategories").attr("disabled", false);
        }
    });
}

问题是，当我将它们都添加到上面的事件处理程序时，它会运行它们，但页面会在两个函数运行后更新下拉列表。我需要第一个更新页面，然后第二个更新页面，因为第二个取决于第一个更改。

Answer 1

只需将第二个函数添加到第一个函数的AJAX回调中，它将以正确的顺序运行。

Answer 2

这是$.Deferreds的完美用例。

function UpdateCategoriesList() {
    var deferred = $.Deferreds();
    // ...
    $.ajax({
        // ...
        success: function() {
            // ...
            // Resolve the deferred once all operations are done
            deferred.resolve();
        }   
    });

    // Make sure you return the deferred
    return deferred;
}

这允许您执行以下操作：

$("#ddlFacilityDatabases").change(function (){
    // When the deferred is resolved, it will call UpdateReportsList
    UpdateCategoriesList().done(UpdateReportsList);
});

Answer 3

我认为您的问题是您希望对异步调用强制执行排序。如果UpdateReportsList必须在UpdateCategoriesList之后，那么您有两种选择。

选项1：正如Neal指出的那样，在第一个函数的ajax调用中调用第二个函数。

选项2：使两个调用都阻塞，而不是异步，如下所示：

$.ajax(
    url: ...,
    async: false,
    ...
);

然后致电

$("#ddlFacilityDatabases").change(function (){
    UpdateCategoriesList();
    UpdateReportsList();
});

总的来说，如果你能改变这两个功能，我认为第一个选择更好。

当一个控件依赖于彼此的更改时，如何在一个控件上正确执行两个事件？

3 个答案: