实现星球名称解密效果遇阻：随机字母循环无法推进字符

修复后的完整代码 #

HTML（和你的原代码一致）

<div class="planet-menu" data-planet="moon"></div>
<div class="planet-name"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JavaScript

$(function() {
  const targetText = $('.planet-menu').data('planet');
  const letterPool = "abcdefghijklmnopqrstuvwxyz";
  const totalChars = targetText.length;
  let currentStep = 0; // 当前要显示到第几个字符
  let randomTick = 0; // 记录当前已显示的随机字母次数
  const randomFlashesPerChar = 5; // 每个正确字符前闪烁多少次随机字母，可调整
  let randomTimer;

  // 生成随机字母闪烁效果
  function flashRandomLetters() {
    // 保留已正确显示的前缀，加上随机字母，更贴近解密感
    const displayText = targetText.substring(0, currentStep) + 
                        letterPool.charAt(Math.floor(Math.random() * letterPool.length));
    $('.planet-name').text(displayText);

    randomTick++;
    if (randomTick < randomFlashesPerChar) {
      randomTimer = setTimeout(flashRandomLetters, 200);
    } else {
      // 随机闪烁够次数后，显示正确的字符前缀
      showNextCorrectChar();
    }
  }

  // 显示到下一个正确字符
  function showNextCorrectChar() {
    currentStep++;
    $('.planet-name').text(targetText.substring(0, currentStep));

    if (currentStep < totalChars) {
      // 重置随机计数器，准备下一轮闪烁
      randomTick = 0;
      setTimeout(flashRandomLetters, 1000); // 字符间的间隔时间，可调整
    }
  }

  // 启动效果
  flashRandomLetters();
});

代码说明 #

• 拆分逻辑：把随机字母闪烁和正确字符显示拆成两个独立函数，避免递归冲突，逻辑更清晰。
• 可控的随机次数：用randomFlashesPerChar定义每个正确字符前的随机闪烁次数，你可以根据视觉需求调整这个数值（比如改成8次会更有解密感）。
• 保留已正确的前缀：显示随机字母时，会保留之前已经正确显示的字符（比如处理第二个字符时，会显示m+随机字母），和你参考的效果更一致。
• 正确的超时管理：每次随机闪烁完成后才进入下一个字符的流程，不会出现多个递归同时运行的情况，彻底解决卡顿问题。

这样修改后，就能实现你想要的「先随机字母闪烁，再逐个显示正确字符」的解密效果啦～

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