Bootstrap 3 Dialog 的按钮回调中可修改外部变量，但因异步执行特性，需在 onhidden 回调中读取最终值，而非紧跟 show() 后立即 console.log()。
bootstrap 3 dialog 的按钮回调中可修改外部变量，但因异步执行特性，需在 `onhidden` 回调中读取最终值，而非紧跟 `show()` 后立即 `console.log()`。
在使用 Bootstrap 3 Dialog（如 Bootstrap-Dialog）时，一个常见误区是：在模态框显示后立即访问被按钮回调修改的变量，却得不到预期结果。这是因为 BootstrapDialog.show() 是异步操作——它立即返回，而按钮点击事件及变量赋值发生在用户交互之后，远晚于后续的 console.log(error) 执行时机。
✅ 正确做法：将变量状态的读取逻辑移至模态框生命周期钩子中，尤其是 onhidden（模态框完全关闭后触发），确保变量已被按钮回调更新。
以下为优化后的完整示例：
let error = false;
if (!error) {
BootstrapDialog.show({
title: 'Attention',
message: 'There was an error',
data: { error: error }, // 可选：仅用于内部传递，非必需
onhidden: function(dialogRef) {
// ✅ 此处 error 已被按钮回调更新，输出真实最终值
console.log('Modal closed. Final error value:', error);
// → 根据用户点击，输出 true（Close）或 false（Keep going）
},
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); // 总是输出 false? 关键注意事项：
- 作用域安全：确保 error 变量声明在模态框配置外且可被所有回调访问（推荐用 let/const 声明于外层作用域）。
- 避免闭包陷阱：不要在 buttons 中通过 data 或参数传递原始值试图“返回”，data 仅用于初始化，不绑定响应式更新。
-
状态管理进阶：若逻辑复杂，建议封装为 Promise 或使用事件总线解耦，例如：
function showErrorDialog() { return new Promise((resolve) => { BootstrapDialog.show({ // ... 其他配置 buttons: [ { label: 'Close', action: () => { resolve(true); } }, { label: 'Keep going', action: () => { resolve(false); } } ] }); }); } // 调用：showErrorDialog().then(result => console.log('User chose:', result));
综上，变量更新本身无需特殊技巧，核心在于理解模态框的异步交互本质，并将状态消费逻辑置于正确的生命周期回调中——onhidden 是最可靠的选择。
