Javascript 迭代字符串数组并为每个字符串添加键入/删除效果，一个接一个地完成

Question

我正在制作的组件旨在输入然后删除字符串列表。 目前，我有打字/删除效果。但是，我无法让循​​环正常运行。

期望的效果是键入 + 取消键入第一个字符串，然后是第二个，然后是第三个等等。

var pos = 0
var speed = 50
var speed2 = 100
var str = document.getElementById('str')
var i

var messages = [
    "Cyber Security",
    "Vulnerability Assessments",
    "Program Management",
    "Compliance Management"
]

messages.forEach(function (message) {

    function type() {
        console.log('Type ' + pos)
        if (pos < message.length) {
            str.innerText += message.charAt(pos)
            pos++
            setTimeout(type, speed) //call this fn again to type letters
        } else {
            setTimeout(erase, speed2)
        }
    }

    type(type, speed)

    //erase fn
    function erase() {
        console.log('Erase ' + pos)
        if (pos >= 0) {
            var temp = message.substring(0, pos)
            str.innerText = temp
            pos--
            setTimeout(erase, speed2)
        }
    }
})

<section class="hollow-hero-21">
    <div class="flex-container">
        <h1>
            Innovative Solutions
            <br>for
            <span id="str"></span>
        </h1>
        <hr>
        <p>This is filler content. The text in this area will be replaced when copy for the site becomes available. This is filler content. The text in this area will be replaced when copy for the site becomes available.</p>
        <a href="#">Learn More</a>
    </div>
</section>

Answer 1

目前，由于您的 messages.forEach 循环，您遇到了同时开始所有输入和子顺序删除的问题。

不需要这个循环，因为你想等到每个单词都被输入并删除。因此，只要您正在输入和删除它，您就需要记住当前消息的索引，然后在删除最后一个单词后更新它。

我更改了您的脚本，以便删除循环，目前只有 1 个操作，并用一个位标志表示 isRemoving。就个人而言，我宁愿使用 setInterval 来完成它，但为了不改变您想要的行为，我添加了 setTimeout。

此版本将无限期运行，因为删除数组中的最后一个单词后，它将返回到数组中的第一条消息。

var speed = 50;
var speed2 = 100;
var str = document.getElementById('str');
var i = 0;
var isRemoving = false;

var messages = [
    "Cyber Security",
    "Vulnerability Assessments",
    "Program Management",
    "Compliance Management"
]

function action() {
  if (isRemoving) {
    if (str.innerText.length > 0) {
      str.innerText = str.innerText.substr(0, str.innerHTML.length - 1);
      setTimeout( action, speed2 );
      return;
    }
    isRemoving = false;
    i++;
    if (i >= messages.length) {
      i = 0;
    }
    setTimeout( action, speed );
    return;
  }
  var message = messages[i];
  str.innerText = message.substr(0, str.innerHTML.length + 1);
  if (str.innerText.length === message.length) {
    isRemoving = true;
  }
  setTimeout( action, isRemoving ? speed2 : speed );
}

setTimeout( action, speed ) ;

<section class="hollow-hero-21">
    <div class="flex-container">
        <h1>
            Innovative Solutions
            <br>for
            <span id="str"></span>
        </h1>
        <hr>
        <p>This is filler content. The text in this area will be replaced when copy for the site becomes available. This is filler content. The text in this area will be replaced when copy for the site becomes available.</p>
        <a href="#">Learn More</a>
    </div>
</section>