本文讲解如何在 JavaScript 中动态监听变量变化并及时执行条件判断，解决因代码执行时机不当导致的 if 语句“只运行一次”或“完全不触发”的常见问题。核心方案是将条件检查封装为独立函数，并在所有修改目标变量的位置显式调用。
本文讲解如何在 javascript 中动态监听变量变化并及时执行条件判断，解决因代码执行时机不当导致的 `if` 语句“只运行一次”或“完全不触发”的常见问题。核心方案是将条件检查封装为独立函数，并在所有修改目标变量的位置显式调用。
在开发点击/挂机类游戏（如灵魂收集器）时，一个典型需求是：当玩家累计获得 10 点灵魂（soulAmount === 10）时，自动触发提示、解锁成就或激活新功能。但初学者常误将 if 判断写在脚本顶层——例如：
if (soulAmount === 10) {
console.log("!!!"); // ❌ 永远不会执行：页面加载时 soulAmount 为 0
}
这段代码仅在初始化阶段执行一次，而 soulAmount 是后续通过用户交互（点击按钮）或定时器（setInterval）动态更新的，因此条件永远无法被重新评估。
✅ 正确做法是将条件检查封装为可复用函数，并在每一次可能改变 soulAmount 的操作后主动调用它。例如定义 validateSoul()：
function validateSoul() {
if (soulAmount === 10) {
console.log("Achievement: First Ten Souls!");
// 可在此处添加更多响应逻辑，如显示弹窗、播放音效、启用新按钮等
}
if (soulAmount >= 100) {
achievement1(); // 解锁百魂成就
}
}
接着，在所有修改 soulAmount 的位置插入调用：
- 用户点击获取灵魂：getSoul() 中更新值后调用 validateSoul()；
- 升级消耗灵魂：upgrade1() 中扣减后调用；
- 挂机自动增长：setInterval 回调中累加后调用。
完整整合示例：
let soulAmount = 0;
let soulAddition = 1;
let sps = parseInt(document.querySelector(".sps").textContent) || 0;
const upgradecost1 = 10;
function validateSoul() {
if (soulAmount === 10) {
console.log("? Soul milestone reached: 10!");
// 例如：document.getElementById("milestone10").classList.add("unlocked");
}
if (soulAmount >= 100) {
achievement1();
}
}
function getSoul() {
soulAmount += soulAddition;
document.querySelector(".souls_amount").textContent = soulAmount;
validateSoul(); // ✅ 关键：立即检查
}
function upgrade1() {
if (soulAmount >= upgradecost1) {
sps += 1;
soulAmount -= upgradecost1;
document.querySelector(".souls_amount").textContent = soulAmount;
document.querySelector(".sps").textContent = sps;
validateSoul(); // ✅ 关键：消耗后仍需检查
} else {
alert("You do not have enough souls!");
}
}
// 挂机收益（每秒增加 sps 点灵魂）
setInterval(() => {
soulAmount += sps;
document.querySelector(".souls_amount").textContent = soulAmount;
validateSoul(); // ✅ 关键：定时更新后检查
}, 1000);
function achievement1() {
alert("Achievement Unlocked: You've collected 100 Souls!");
document.getElementById("collect100").style.display = "block";
}
⚠️ 注意事项：
- 避免使用 ==，始终用 === 进行严格相等比较，防止类型隐式转换引发意外；
- 若需监听多个阈值（如 10、50、100），可在 validateSoul() 中用 if/else if/else 或 switch 统一管理；
- 对于更复杂的响应式场景（如频繁更新、多依赖变量），可考虑使用 Proxy 或状态管理库，但对本例而言，手动调用 validateSoul() 是最清晰、高效且易维护的方案。
这种“变更即校验”（Change-and-Check）模式，是前端状态驱动逻辑的基础实践——它确保业务规则与数据变更强同步，杜绝了因执行时机错位导致的逻辑遗漏。
