javascript - 生成多个随机字母以创建解密效果？

我想创建这样的效果a link!。 （背景中的星球名称）

因此，我需要先生成许多随机字母，然后才能逐个显示我的单词的字母。

在我的测试中，我尝试在div.planet名称中逐个字母显示单词moon，并延迟1000ms。在显示月亮字母之前，我想生成许多随机字母。

但是，当我使用randomLetterEffect函数时，我在第一个字母上保持阻塞，并且月亮这个词没有出现！

为什么我不在text.substring（0，1），text.substring（0，2），text.substring（0，3）等中不生成随机字母...而是仅在text.substring（0，0 ）？

我尝试这个：

var text = $('.planet-menu').data('planet');
var letterChoice = "abcdefghijklmnopqrstuvwxyz"
var length = text.length;
var timeOut;
var timeOut2;
var character = 0;


(function typeWriter() {
    timeOut = setTimeout(function() {
        character++;

        var type = text.substring(0, character);

        (function ramdomLetterEffect(){
            timeOut2 = setTimeout(function() {

                var type = text.substring(0, character);
                var randomLetter = letterChoice.charAt(Math.floor(Math.random() * letterChoice.length));
                $('.planet-name').text(randomLetter);
                ramdomLetterEffect();

                if (character == length) {
                    clearTimeout(timeOut2);
                }

            },200);
        }());

        $('.planet-name').text(type);
        typeWriter();

        if (character == length) {
            clearTimeout(timeOut);
        }

    }, 1000);
}());

<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>

我非常感谢您的阅读！

最佳答案

如果我正确理解您的问题，则这些问题在您的代码中：

1-在更新类的文本之前检查字符串的长度

if (character==length) {
  clearTimeout(timeOut2);
  return;
}

2-这样更新类的文本

$(".planet-name").text($(".planet-name").text().substr(0, character) + randomLetter);

工作代码

var text = $(".planet-menu").data("planet");
var letterChoice = "abcdefghijklmnopqrstuvwxyz";
var length = text.length;
var timeOut;
var timeOut2;
var character = 0;

(function typeWriter() {
  timeOut = setTimeout(function() {
    character++;

    var type = text.substring(0, character);

    (function ramdomLetterEffect() {
      timeOut2 = setTimeout(function() {
        var type = text.substring(0, character);
        var randomLetter = letterChoice.charAt(
          Math.floor(Math.random() * letterChoice.length)
        );
        if (character == length) {
          clearTimeout(timeOut2);
          return;
        }
        $(".planet-name").text($(".planet-name").text().substr(0, character) + randomLetter);


        if (character == length) {
          clearTimeout(timeOut2);
        } else {
          ramdomLetterEffect();
        }
      }, 200);
    })();

    $(".planet-name").text(type);
    typeWriter();

    if (character == length) {
      clearTimeout(timeOut);
    }
  }, 1000);
})();

<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>