jQuery 事件序列

Question

我有一个包含 2 个部分的主屏幕，一个列表和一个详细信息部分。 通过一个按钮，我打开一个模态对话框。 在此模式对话框中，有 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) { }
    });

}

Answer 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 并关闭。

Answer 2

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

async: false

Answer 3

async : false 有时可能会挂起用户界面，最好的方法可能是戴夫建议的方法。 将代码移动到成功函数a 并确保 ajax 完成。