jQuery 事件序列答案

【问题标题】：jQuery event sequencejQuery 事件序列
【发布时间】：2010-09-27 19:55:20
【问题描述】：

我有一个主屏幕，其中包含列表和详细信息部分两部分。通过一个按钮，我打开一个模式对话框。在此模式对话框中，有 2 个按钮，一个用于保存，另一个用于取消。保存后，我调用一个函数来刷新主屏幕上的列表并关闭对话框。问题是，有时列表会在保存结束之前刷新。然后我想在刷新列表之前等待保存结束。你知道怎么做吗：

$("#dialog-confirm").dialog({
    open: function (event, ui) {
        $('#FirstName2').focus(); 
    },
    beforeClose: function (event, ui) { RefreshList(); },
    close: function (event, ui) {
        $('#FirstName2').val('');
        $('#LastName2').val('');
    },
    resizable: false,
    height: 240,
    width: 300,
    modal: true,
    autoOpen: false,
    buttons: {
        "Sauvegarder": function () {

            $.ajax({
                type: "POST",
                url: "/Customer/Save",
                data: {
                    id: jsIdEmpty,
                    languageId: $('#Language2').val(),
                    firstName: $('#FirstName2').val(),
                    lastName: $('#LastName2').val(),
                    isEnable: $('#IsEnable2').attr('checked')
                },
                success: function (html) {
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) { }
            })

            $(this).dialog("close");
        },
        "Annuler": function () {
            $(this).dialog("close");
        }
    }

});


function RefreshList() {

    $.ajax({
        type: "POST",
        url: "/Customer/List",
        data: {
    },
    success: function (html) {
        $("#LeftColumn").html(html);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) { }
    });

}

【问题讨论】：

标签： javascript jquery asp.net-mvc jquery-ui jquery-events

【解决方案1】：

将对 Refresh() 的调用移至 AJAX 调用的成功事件处理程序：

        $.ajax({
            type: "POST",
            url: "/Customer/Save",
            data: {
                id: jsIdEmpty,
                languageId: $('#Language2').val(),
                firstName: $('#FirstName2').val(),
                lastName: $('#LastName2').val(),
                isEnable: $('#IsEnable2').attr('checked')
            },
            success: function (html) {
                RefreshList(); 
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) { }
        })

我也会将对话框 close() 移到那里。这使得当 AJAX 调用完全完成（并且成功）时，它将调用 Refresh 并关闭。

【讨论】：

【解决方案2】：

问题是对 /Customer/Save 的 .ajax 调用是异步发生的。要使其同步，请添加此选项：

async: false

【讨论】：

【解决方案3】：

async : false 有时可能会挂起 ui，最好的方法可能是 dave 建议的方法。将代码移动到成功函数并确保 ajax 完成。

【讨论】：