JavaScript中onclick函数内修改变量后外部未同步的问题

核心原因 #

你遇到的现象是代码执行顺序导致的：

• 页面加载时，先执行var bool = 0;初始化变量，接着绑定点击事件，然后立刻执行外部的console.log(bool)——这时候按钮还没被点击，bool自然是初始值0。
• 点击事件里的代码只有在用户点击按钮时才会触发，此时修改bool并打印的是最新值，但外部的console.log早就执行完毕，不会重新运行。

解决方法 #

1. 查看实时变量值：点击按钮后，直接在浏览器控制台输入bool并回车，就能看到更新后的最新值（bool是全局变量，修改后会同步到全局作用域）。
2. 封装检查逻辑：如果需要每次修改后都主动输出最新值，可以把打印逻辑写成函数，在点击事件里调用：

var bool = 0; 

// 封装打印函数
function logCurrentBool() {
    console.log("当前bool值：", bool);
}

switchCameraButton.addEventListener('click', function() {
    camera.switch();
    // 简化切换逻辑
    bool = bool === 0 ? 1 : 0;
    logCurrentBool(); // 点击时触发打印
});

logCurrentBool(); // 打印初始值

3. 简化切换代码：你用0和1替代布尔值的切换逻辑可以简化成一行：

bool = 1 - bool; // 0变1，1变0
// 若使用真正的布尔值，逻辑更简洁：
// var bool = false;
// bool = !bool; // 在true和false间切换

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