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

Question

是否有合适的方法/设计来做到这一点?还是必须将它们组合到一个函数/事件中，并以Ajax返回的值为基础?

我有一个下拉列表，有两个变化事件/函数，像这样，

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

两个函数都修改了"#ddlCategories"one_answers"#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,
    ...
);

then call

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

总的来说，我认为第一个选项更好，如果你可以改变这两个函数。