如何通过Bootstrap3-Dialog模态框设置变量？

问题原因 #

你的代码里console.log(error)会在模态框弹出之前就执行——BootstrapDialog的弹窗是异步触发的，不会阻塞后续代码执行。此时用户还没点击任何按钮，error自然还是初始的false。虽然按钮的action函数确实会修改error，但这个修改发生在日志输出之后，所以你看到的始终是初始值。

解决方案 #

方法1：使用回调函数处理后续逻辑

把依赖error的逻辑（比如console.log）封装成回调函数，在按钮点击关闭弹窗后调用：

let error = false;  

if (error === false) {             
  BootstrapDialog.show({                 
    title: 'Attention',                 
    message: `There was an error`,                 
    buttons: [
      {
        label: 'Close', 
        action: function (dialogItself) { 
          error = true; 
          dialogItself.close();
          handleDialogResult(); // 触发后续逻辑
        }
      },
      {
        label: 'Keep going', 
        cssClass: 'btn-success', 
        action: function (dialogItself) { 
          error = false; 
          dialogItself.close();
          handleDialogResult(); // 触发后续逻辑
        }
      }
    ]             
  });
} 

// 处理弹窗关闭后的逻辑
function handleDialogResult() {
  console.log(error); // 这里能拿到按钮设置后的正确值
}

方法2：用Promise+async/await简化异步逻辑

把弹窗逻辑封装成Promise，通过await等待用户操作结果，让代码逻辑更线性：

// 封装弹窗为Promise
function showErrorDialog() {
  return new Promise((resolve) => {
    BootstrapDialog.show({                 
      title: 'Attention',                 
      message: `There was an error`,                 
      buttons: [
        {
          label: 'Close', 
          action: function (dialogItself) { 
            dialogItself.close();
            resolve(true); // 点击Close，返回true作为error新值
          }
        },
        {
          label: 'Keep going', 
          cssClass: 'btn-success', 
          action: function (dialogItself) { 
            dialogItself.close();
            resolve(false); // 点击Keep going，返回false作为error新值
          }
        }
      ]             
    });
  });
}

// 用async函数执行逻辑
async function init() {
  let error = false;  
  if (error === false) {             
    error = await showErrorDialog(); // 等待用户点击按钮，获取结果
    console.log(error); // 这里能得到正确的error值
  }
}

// 启动逻辑
init();

补充说明 #

如果你在原来的代码里，点击按钮后手动在浏览器控制台输入error，会发现它已经被按钮修改了——只是console.log执行得太早，没捕捉到修改后的值。

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