如何先关闭Bootstrap 5模态框再执行Ajax请求？

原代码的核心问题 #

1. 钩子函数拼写错误：你写的beforestart是错误的，jQuery Ajax的正确前置钩子是beforeSend
2. 同步Ajax（async: false）是关键问题：同步请求会完全阻塞浏览器UI线程，模态框的关闭动画、DOM更新都需要等待线程释放才能执行，所以即使调用了modal('hide')，浏览器也没法立刻处理，最终导致Ajax先执行、模态框后关闭。

方案一：用setTimeout延迟Ajax执行 #

通过把Ajax请求放到下一个事件循环，让浏览器先完成模态框关闭的UI渲染：

// 先触发模态框关闭
$("#freeModal").modal('hide');
// 延迟少量时间（可根据模态框关闭动画时长调整，一般100ms足够）再发送Ajax
setTimeout(() => {
    jQuery.ajax({
        url: '/url',
        // 强烈建议移除async: false，同步请求会阻塞页面，严重影响用户体验
        // 可添加其他请求配置，比如method、data等
    });
}, 100);

方案二：用Promise封装模态框隐藏事件（更优雅的写法） #

这种方式本质还是利用Bootstrap的hidden.bs.modal事件，但通过Promise封装后，代码逻辑更清晰，避免直接在事件回调里嵌套Ajax：

// 封装隐藏模态框的Promise函数
function hideModal(modalSelector) {
    return new Promise((resolve) => {
        const $modal = $(modalSelector);
        $modal.modal('hide');
        // 用one绑定单次事件，避免重复监听
        $modal.one('hidden.bs.modal', resolve);
    });
}

// 异步执行逻辑
(async function() {
    // 等待模态框完全关闭
    await hideModal("#freeModal");
    // 再发送Ajax请求
    jQuery.ajax({
        url: '/url',
        // 添加其他请求配置
    });
})();

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