本文讲解如何在 javascript 中动态监听变量变化并及时执行条件判断，解决“if 语句仅在页面加载时运行一次、无法响应后续值变更”的常见问题。核心方案是将校验逻辑封装为独立函数，并在所有可能修改目标变量的位置主动调用。
本文讲解如何在 javascript 中动态监听变量变化并及时执行条件判断，解决“if 语句仅在页面加载时运行一次、无法响应后续值变更”的常见问题。核心方案是将校验逻辑封装为独立函数，并在所有可能修改目标变量的位置主动调用。
在开发点击/挂机类游戏（如灵魂收集器）时，一个典型需求是：当 soulAmount 首次达到或超过某个阈值（例如 10 或 100）时，立即触发提示、解锁成就或执行其他业务逻辑。但初学者常误将条件判断写在全局作用域（如 if (soulAmount === 10) { ... }），导致该判断仅在脚本加载时执行一次——此时 soulAmount 还是初始值 0，自然无法命中。
✅ 正确做法是：将条件检查逻辑解耦为独立函数，并在每次修改 soulAmount 后显式调用它。这属于“手动触发式监听”，简单、可靠、无依赖，特别适合状态变更路径明确的场景。
以下为优化后的关键代码结构：
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 count reached 10!");
// 可在此添加一次性成就逻辑（如弹窗、UI显示）
}
if (soulAmount >= 100) {
achievement1(); // 解锁100灵魂成就
// 注意：若需仅触发一次，可设标志位避免重复执行
}
}
// 所有修改 soulAmount 的地方都必须调用 validateSoul()
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!");
}
}
// 自动挂机收益（每秒增加）
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";
}⚠️ 注意事项：
- 不要依赖 == 或 === 修复时机问题：运算符选择影响类型安全，但无法解决“执行时机错误”这一根本问题；
- 避免在 setInterval 中重复设置 innerHTML：推荐统一使用 textContent 提升性能与安全性（防止 XSS）；
- 如需严格“首次达成”效果（例如只在第100点灵魂被获得时触发），可在 validateSoul() 内部添加布尔标志（如 let unlocked100 = false;），校验通过后置为 true 并跳过后续触发；
- 进阶替代方案：对于复杂状态系统，可考虑使用 Proxy 代理或状态管理库（如 Zustand），但对本例而言，显式调用 validateSoul() 是最轻量、最易维护的解法。
通过将条件逻辑集中化、调用显式化，你不仅能精准响应数值变化，还能清晰掌控执行路径，大幅提升代码的可读性与可维护性。
