如何使用 for 循环创建打字效果[重复]

Question

有人可以帮我弄清楚逻辑吗？我正在尝试使用for循环来连续循环数组中元素的每个字符，然后在到达元素末尾时删除

var changingtext = document.querySelector(".text");

var arr = ["hard","Fun","a Journey","Career", "Countless hours"];
var length;
var index = 0;
var count=0;
var letter = "";
let currentText = "";



window.addEventListener("DOMContentLoaded", function(){
    type();
});

function type(){
    setTimeout(function(){

        for(var i=0; i<arr.length; i++){
            length = arr[i].length;
            for(j=0; j<length;j++){
                letter += arr[i].charAt(j);
                changingtext.textContent = letter;
                console.log(letter);
            }

        }
    }, 200);
    
}

Answer 1

你应该只在一个循环中安排超时，增加等待的时间：

var changingtext = document.querySelector(".text");

var arr = ["hard","Fun","a Journey","Career", "Countless hours"];
var length;
var index = 0;
var count=0;
var letter = "";
let currentText = "";



window.addEventListener("DOMContentLoaded", function(){
    type();
});

function type(){
  let timeout = 200;
  for(var i=0; i<arr.length; i++){
      length = arr[i].length;
      letter += ' ';
      for(j=0; j<length * 2;j++){
          if (j > length - 1) {
              letter = letter.slice(0, -1)
          } else {
              letter += arr[i].charAt(j);
          }
          timeout += 200;
          ((timeout, letter) => {
            setTimeout(() => {
                changingtext.textContent = letter;
                console.log(letter);
            }, timeout);
          })(timeout, letter);
      }

  }
    
}

<div class="text"/>

或者你的意思是这样的？

var changingtext = document.querySelector(".text");

var arr = ["hard","Fun","a Journey","Career", "Countless hours"];
var length;
var index = 0;
var count=0;
var letter = "";
let currentText = "";



window.addEventListener("DOMContentLoaded", function(){
    type();
});

function type(){
  let timeout = 200;
  for(var i=0; i<arr.length; i++){
      length = arr[i].length;
      letter = '';
      for(j=0; j<length * 2;j++){
          if (j > length - 1) {
              letter = letter.slice(0, -1)
          } else {
              letter += arr[i].charAt(j);
          }
          timeout += 200;
          ((timeout, letter, restart) => {
            setTimeout(() => {
                changingtext.textContent = letter;
                console.log(letter);
                if (restart) type();
            }, timeout);
          })(timeout, letter, i === arr.length - 1 && j === (length * 2) - 1);
      }

  }
    
}

<div class="text"/>