本文详解如何通过 onhidden 回调监听模态框关闭时机，在 Bootstrap3-Dialog 中可靠更新外部作用域变量（如 error），避免因异步执行导致的变量未同步问题。
本文详解如何通过 `onhidden` 回调监听模态框关闭时机，在 bootstrap3-dialog 中可靠更新外部作用域变量（如 `error`），避免因异步执行导致的变量未同步问题。
在使用 Bootstrap3-Dialog 时，一个常见误区是：直接在 show() 调用后立即读取变量值，期望它已被按钮回调修改。但模态框是异步弹出的，BootstrapDialog.show() 立即返回，而按钮点击逻辑发生在用户交互之后——因此紧随其后的 console.log(error) 总是输出初始值（如 false），而非按钮操作后的新值。
✅ 正确做法是：将依赖变量状态的逻辑，移至模态框生命周期事件中，尤其是 onhidden（模态框完全关闭并从 DOM 移除后触发），确保变量已由用户操作更新完毕。
以下为优化后的完整示例：
let error = false;
if (!error) {
BootstrapDialog.show({
title: 'Attention',
message: 'There was an error',
// data 属性仅用于向 dialog 内部传递只读上下文，不自动绑定或响应式更新外部变量
data: { error: error },
onhidden: function(dialogItself) {
// ✅ 此处 error 已被按钮 action 修改，可安全使用
console.log('Modal closed. Final error state:', error);
// 示例：根据 error 值执行后续流程
if (error) {
console.log('User chose to abort — handling error...');
} else {
console.log('User chose to continue — resuming workflow.');
}
},
buttons: [
{
label: 'Close',
action: function(dialogItself) {
error = true; // 更新外部变量
dialogItself.close();
}
},
{
label: 'Keep going',
cssClass: 'btn-success',
action: function(dialogItself) {
error = false; // 显式保持/重置状态
dialogItself.close();
}
}
]
});
}
// ⚠️ 错误写法：此处 error 仍为 false（同步执行，早于用户点击）
// console.log(error); // 不要放在这里！? 关键注意事项：
- data 选项仅用于向对话框内部传参（如自定义模板渲染），不会双向绑定或自动同步外部变量；所有状态变更必须显式赋值。
- 避免在 show() 后同步访问变量——务必使用 onshown（弹出后）、onhide（开始关闭前）或 onhidden（完全关闭后）等事件钩子。
- 推荐使用 let/const 替代 var 声明变量，防止意外提升或全局污染。
- 若需更复杂的状态管理（如多个模态框嵌套、Promise 链式调用），可封装为返回 Promise 的函数，内部 resolve(error) 实现异步等待。
通过合理利用 onhidden 事件，你就能精准捕获用户决策结果，让模态框真正成为可控的交互枢纽。
