JavaScript单个if语句失效其余正常问题求助

问题描述 #

我正在开发一款游戏，通过money变量实现升级逻辑。设置了定时器每0.099秒调用一次upc函数，但运行时程序只能执行到if(money > 1000005 && Cookies.get("modal2alrshown")相关语句的位置，无法继续执行后面的面包镐升级等逻辑。使用了JavaScript的Cookies库，以下是upc函数代码：

function upc(){
  if(money > 1000){
    irp.style.display = "inline";
    irptxt.style.display = "inline";
    irpbtn.style.display="inline";
   } else {
    return false
  }
  if(money > 1005 && Cookies.get("modal1alrshown") != "yep"){
    npamodal("./assets/iron_pickaxe.png","Iron Pickaxe")
    Cookies.set("modal1alrshown","yep");
  }
  if(money > 1000000){
    gp.style.display = "inline";
    gptxt.style.display = "inline";
    gpbtn.style.display="inline"
  } else {
    return false;
  }
  if(money > 1000005 && Cookies.get("modal2alrshown") != "yep"){
    npamodal("./assets/gold_pickaxe.png","Gold Pickaxe")
    Cookies.set("modal2alrshown","yep");
  } else {
    return false;
  }
  if(money > 5000000){
    bgep.style.display = "inline";
    bgptxt.style.display = "inline";
    bgpbtn.style.display="inline";
  } else {
    return false;
  }
  if(money > 5000005 ){
    upcontent.innerHTML = "<div id='up1-close'>To exit, click on sky</div><h1 style='text-align:center;'>New Pickaxe Availible!</h1><img src='./assets/baguettepick.png' height='120px'>Baguette Pickaxe<br>And you got a <br><h3>Travel Ticket<img src='./assets/travelticket.png' height='20px'></h3>"
    $("#up1-content, #up1-background").toggleClass("active");
    Cookies.set("modal3alrshown","yep");
    Cookies.set("travelTicket","1");
  } else {
    return false;
  }
} 

问题根源 #

函数里的多个else return false是核心问题：只要前面某一个条件不满足，就会直接终止整个函数的执行，导致后续所有升级逻辑都无法触发。比如：

• 当money超过1000但没到1000000时，第二个if的else return false会直接跳出函数，金镐、面包镐的逻辑根本不会执行
• 当money超过1000000但没到5000000时，第四个else return false会终止函数，面包镐的逻辑无法触发

这些return false完全没必要——你只是想在条件不满足时跳过当前DOM显示逻辑，不需要终止整个函数。

修复后的代码 #

function upc(){
  // 铁镐显示逻辑
  if(money > 1000){
    irp.style.display = "inline";
    irptxt.style.display = "inline";
    irpbtn.style.display="inline";
  }

  // 铁镐弹窗逻辑：仅在未显示过弹窗时触发
  if(money > 1005 && Cookies.get("modal1alrshown") !== "yep"){
    npamodal("./assets/iron_pickaxe.png","Iron Pickaxe")
    Cookies.set("modal1alrshown","yep");
  }

  // 金镐显示逻辑
  if(money > 1000000){
    gp.style.display = "inline";
    gptxt.style.display = "inline";
    gpbtn.style.display="inline"
  }

  // 金镐弹窗逻辑：仅在未显示过弹窗时触发
  if(money > 1000005 && Cookies.get("modal2alrshown") !== "yep"){
    npamodal("./assets/gold_pickaxe.png","Gold Pickaxe")
    Cookies.set("modal2alrshown","yep");
  }

  // 面包镐显示逻辑
  if(money > 5000000){
    bgep.style.display = "inline";
    bgptxt.style.display = "inline";
    bgpbtn.style.display="inline";
  }

  // 面包镐弹窗逻辑：新增已显示判断，避免重复触发
  if(money > 5000005 && Cookies.get("modal3alrshown") !== "yep"){
    upcontent.innerHTML = "<div id='up1-close'>To exit, click on sky</div><h1 style='text-align:center;'>New Pickaxe Availible!</h1><img src='./assets/baguettepick.png' height='120px'>Baguette Pickaxe<br>And you got a <br><h3>Travel Ticket<img src='./assets/travelticket.png' height='20px'></h3>"
    $("#up1-content, #up1-background").toggleClass("active");
    Cookies.set("modal3alrshown","yep");
    Cookies.set("travelTicket","1");
  }
} 

额外优化建议 #

1. 避免重复弹窗：修复后的代码给面包镐弹窗加上了Cookies.get("modal3alrshown") !== "yep"的判断，防止每次调用函数都重复修改DOM和切换类
2. 降低定时器频率：0.099秒（约10ms）的调用间隔太频繁，会浪费性能，建议改成0.1秒（100ms），游戏体验几乎不受影响，但能减少资源消耗
3. 封装重复代码：把DOM元素显示逻辑封装成函数，减少冗余代码：

function showElements(...elements) {
  elements.forEach(el => el.style.display = "inline");
}
// 使用示例：showElements(irp, irptxt, irpbtn);

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