我的JavaScript代码运行导致replit.com无响应崩溃，是什么原因？

你代码里的多个语法错误、逻辑错误加上高频定时调用叠加，才导致页面无限加载、平台无响应，核心问题集中在你提到的display.updateUpgrades相关逻辑以及关联的升级购买、存档加载逻辑：

核心错误列表 #

• 未定义变量引用错误：display.updateUpgrades的点击类型升级判断分支中，错误使用了未定义的index变量，正确应为循环变量i，该错误会持续抛出引用异常，触发频率和updateUpgrades调用频率一致
• 拼写+括号逻辑错误：upgrade.purchase方法中，buildingIndex被错拼为buidlingIndex，且数组索引和赋值的括号位置完全错误，原本要给建筑收入乘倍数的逻辑，变成了修改建筑索引值，直接导致数组越界、逻辑混乱
• 变量污染+死循环风险：loadGame方法里所有嵌套循环都使用了同名变量i，var声明的变量没有块级作用域，会直接导致循环计数混乱，触发死循环
• 赋值对象错误：loadGame中读取升级购买状态时，错误赋值给了upgrade.purchase方法，直接覆盖了购买方法，导致后续调用报错
• DOM拼接错误：updateUpgrades中拼接图片title时，upgrade.description没有加索引[i]，且换行符错写为$#10;，会生成错误的HTML属性，导致图片资源加载异常，这也是你加了图片就崩溃的直接原因

修复代码片段 #

1. 修复后的updateUpgrades方法 #

updateUpgrades: function() {
  document.getElementById("upgradeContainer").innerHTML = " ";
  for (var i = 0; i < upgrade.name.length; i++) {
    if (!upgrade.purchased[i]) {
      if (upgrade.type[i] == "building" && building.count[upgrade.buildingIndex[i]] >= upgrade.requirement[i]) {
        document.getElementById("upgradeContainer").innerHTML += '<img src="'+upgrade.image[i]+'" title="'+upgrade.name[i]+' &#10;'+upgrade.description[i]+' &#10; ('+upgrade.cost[i]+' bitcoin)" onclick="upgrade.purchase('+i+')">';
      } else if (upgrade.type[i] == "click" && game.totalClicks >= upgrade.requirement[i]){
         document.getElementById("upgradeContainer").innerHTML += '<img src="'+upgrade.image[i]+'" title="'+upgrade.name[i]+' &#10;'+upgrade.description[i]+' &#10;('+upgrade.cost[i]+' bitcoin)" onclick="upgrade.purchase('+i+')">';
      }
    }
  }
}

2. 修复后的upgrade.purchase方法 #

purchase: function (index) {
  if(!this.purchased[index] && game.score >= this.cost[index]) {
    if (this.type[index] == "building" && building.count[this.buildingIndex[index]] >= this.requirement[index]) {
      game.score -= this.cost[index];
      // 修正拼写和括号位置
      building.income[this.buildingIndex[index]] *= this.bonus[index];
      this.purchased[index] = true;
      display.updateUpgrades();
      display.updateScore(); 
    } else if (this.type[index] == "click" && game.totalClicks >= this.requirement[index]) {
      game.score -= this.cost[index];
      game.clickValue *= this.bonus[index];
      this.purchased[index] = true;
      display.updateUpgrades();
      display.updateScore();
    }
  }
}

3. 修复后的loadGame方法 #

function loadGame() {
  let savedGame = JSON.parse(localStorage.getItem("gameSave")); 
  if (localStorage.getItem("gameSave") !== null) {
    if (typeof savedGame.score !== "undefined") game.score = savedGame.score;
    if (typeof savedGame.totalScore !== "undefined") game.totalScore = savedGame.totalScore;
    if (typeof savedGame.totalClicks !== "undefined") game.totalClicks = savedGame.totalClicks;
    if (typeof savedGame.clickValue !== "undefined") game.clickValue = savedGame.clickValue;
    if(typeof savedGame.buildingCount !== "undefined") {
      for( var i = 0; i < savedGame.buildingCount.length; i++) {
        building.count[i] = savedGame.buildingCount[i];
      }
    }
    if (typeof savedGame.buildingIncome !== "undefined") {
      // 不同循环用不同变量名，避免污染
      for (var j = 0; j < savedGame.buildingIncome.length; j++) {
        building.income[j] = savedGame.buildingIncome[j];
      }
    }
    if (typeof savedGame.buildingCost !== "undefined") {
      for (var k = 0; k < savedGame.buildingCost.length; k++) {
        building.cost[k] = savedGame.buildingCost[k]
      }
    }
    if(typeof savedGame.upgradePurchased !== "undefined") {
      for (var l = 0; l < savedGame.upgradePurchased.length; l++) {
        // 修正赋值对象
        upgrade.purchased[l] = savedGame.upgradePurchased[l];
      }
    }
  }
}

修复完以上问题后，页面就不会再出现无限加载、replit无响应的问题了。

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