如何让JS异步调用MVC控制器方法后等待结果再执行后续代码？

核心问题 #

当前代码中validateScheduleDate()是通过$.get发起的异步请求，但validateTab方法会直接执行后续switch逻辑并返回结果，完全未等待异步验证完成；虽提交按钮的click事件用了.then，但validateScheduleDate内部回调的返回值未正确传递，异步流程的结果处理不够严谨。

修正步骤 #

1. 重构validateScheduleDate函数

让它正确返回Promise，在异步流程中传递验证状态，移除无效的return false/true（这些返回值无法被外部获取）：

function validateScheduleDate() {
    var startDate = document.getElementById('dispatch-start-date').value;
    var startTime = document.getElementById('ddl-dispatch-times').value;
    var arrivalTimeFrame = parseFloat(document.getElementById("hdn-WOArrivalTimeFrame-id").value).toFixed(2);
    var scheduledDate = document.getElementById("ScheduledDate").value;
    var scheduledTime = document.getElementById("ddl-dispatch-scheduled-times").value;
    var dateErrorSpan = document.getElementById("ScheduledDate-Error");  
    var timeErrorSpan = document.getElementById("ScheduledTime-Error");

    // 返回$.get的Promise对象，用then处理结果
    return $.get('/WorkOrderDispatch/GetScheduledEndDate', {
        dispStartDate: startDate, dispStartTime: startTime, dispTimeFrame: arrivalTimeFrame,
        dispScheduledDate: scheduledDate, dispScheduledTime: scheduledTime
    }).then(function (result) {
        if (result == 'hasDaysDifference') {
            timeErrorSpan.textContent = '';
            dateErrorSpan.textContent = '请在到达时间范围' + arrivalTimeFrame + '小时内输入计划日期';
            $wizard.wizard('changeTo', '#' + tabPaneNames.general);
            return false; // 验证不通过，返回false
        } else if (result == 'hasTimeDifference') {
            dateErrorSpan.textContent = '';
            timeErrorSpan.textContent = '请在到达时间范围' + arrivalTimeFrame + '小时内输入计划日期';  
            $wizard.wizard('changeTo', '#' + tabPaneNames.general);
            return false; // 验证不通过，返回false
        } else {
            dateErrorSpan.textContent = '';
            timeErrorSpan.textContent = '';
            return true; // 验证通过，返回true
        }
    }).fail(function() {
        // 处理请求失败的情况
        dateErrorSpan.textContent = '日期验证请求失败，请重试';
        return false;
    });
}

2. 修改validateTab方法为异步函数

validateTab需要等待validateScheduleDate的结果，因此改为返回Promise，先完成日期验证，再执行对应tab的验证逻辑：

$wizard.wizard({
    validateTab: function (currentTab) {
        // 返回Promise，先等待日期验证完成
        return validateScheduleDate().then(function(isDateValid) {
            if (!isDateValid) {
                return false; // 日期验证不通过，直接返回false阻止切换
            }
            // 日期验证通过后，执行原有的tab验证逻辑
            switch (currentTab.index()) {
                case 0: // tabPaneNames.general
                    return validateSales1();
                case 1: // tabPaneNames.problems
                    return validateSales2();
                case 2: // tabPaneNames.serviceProviders
                    return validateSales3();           
                default:
                    return false;
            }
        });
    }
});

3. 优化提交按钮逻辑

提交按钮的逻辑已使用.then，可调整为更清晰的写法，同时处理请求失败场景：

$('[submit-sales]').click(function (event) {
    event.preventDefault();  
    
    validateScheduleDate().then(function(isDateValid) {
        if (isDateValid) {
            validateTabs(function () { submitForm(); }, true);
        }
        // 验证不通过的提示已在validateScheduleDate中处理，无需额外操作
    }).fail(function() {
        alert('日期验证失败，请检查网络或重试');
    });
});

关键说明 #

• jQuery的$.get返回的jqXHR对象实现了Promise接口，可直接用.then和.fail处理异步流程
• validateTab返回Promise后，wizard组件会自动等待Promise完成，根据返回的true/false决定是否允许切换tab
• 所有异步操作的结果通过Promise回调传递，确保后续逻辑仅在验证完成后执行

内容的提问来源于stack exchange，提问作者Alevel