HTML小游戏随机字母生成逻辑异常排查与优化求助

问题根源 #

• 界面频繁刷新的假象：你将DOM更新逻辑写在了去重的每个分支中，同一组字母去重过程中每修改一次字母就更新一次界面，导致你误以为无重复时也在反复重生成整组字母。
• 定时器逻辑不符合预期：你使用了setInterval每8秒固定调用一次生成函数，无论上一组字母是否重复都会定时生成新组，和你“仅重复时重生成同一组”的预期不符。
• 无效属性赋值：id为1st/2nd/3rd的节点是span元素，本身没有value属性，你对value的赋值不会被浏览器存储，后续校验逻辑取值时会拿到undefined，进一步干扰了你对生成逻辑是否正常的判断。
• 字母表遗漏：原代码中的字母序列漏掉了字母N，无法生成该字母。

优化方案 #

1. 重构生成逻辑 #

先在内存中完成去重，再统一更新界面，避免频繁刷新：

function getalphabets() {
  // 补全遗漏的字母N
  const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  let hasRepeat = true;
  // 内存中生成完全不重复的三个字母，不操作DOM
  while (hasRepeat) {
    alphabet1[0] = alphabet[Math.floor(Math.random() * alphabet.length)];
    alphabet1[1] = alphabet[Math.floor(Math.random() * alphabet.length)];
    alphabet1[2] = alphabet[Math.floor(Math.random() * alphabet.length)];
    // 用Set快速判断是否有重复
    hasRepeat = new Set(alphabet1).size !== 3;
  }
  // 生成完成后统一更新一次DOM
  const firstEl = document.getElementById("1st");
  const secondEl = document.getElementById("2nd");
  const thirdEl = document.getElementById("3rd");
  firstEl.textContent = alphabet1[0];
  firstEl.dataset.value = alphabet1[0]; // 用自定义属性存储值
  secondEl.textContent = alphabet1[1];
  secondEl.dataset.value = alphabet1[1];
  thirdEl.textContent = alphabet1[2];
  thirdEl.dataset.value = alphabet1[2];
}

2. 修改校验逻辑适配自定义属性 #

可合并为一个通用函数，不用写三个重复逻辑：

function checkAlphabet(index) {
  const target = document.getElementById(['1st','2nd','3rd'][index]).dataset.value;
  const selected = document.getElementById("alphabet").value;
  score = target === selected ? score + 2 : score - 1;
  document.getElementById("Score").textContent = score;
  // 如果需要用户点击后再生成下一组，可在这里调用getalphabets()，同时删除原来的setInterval
}

对应的HTML点击事件改成onclick="checkAlphabet(0)"、onclick="checkAlphabet(1)"、onclick="checkAlphabet(2)"即可。

3. 调整定时逻辑 #

如果不需要每8秒自动换一组，就把setInterval(getalphabets,8000)改成单次调用getalphabets()，在用户完成当前轮匹配后再调用生成下一组即可。

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