在传递下一个数组索引之前删除每个字母？

如何解决在传递下一个数组索引之前删除每个字母？

我写这个小脚本是为了制作一个“自写文本”动画。问题是，每说完一个词，它就会直接跳到下一个词。我无法解决这个问题，因此在传递数组中的下一个单词之前，每个字母都会被删除。

const text = ['design','make','develop','code','create']
let count = 0;
let index = 0;
let currentText = "";
let letter = "";

(function type() {
    if (count === text.length) {
        count = 0;
    }
    currentText = text[count];
    letter = currentText.slice(0,++index);
    
    document.querySelector(".main__animation").textContent = letter;
    if (letter.length === currentText.length) {
        count++
        index = 0;
    }
    setTimeout(type,500);
}())

先谢谢了！

解决方法

const text = [,'design','make','develop','code','create']
let count = 1;
let index = 0;
let currentText = "";
let letter = "";
var deleting = false;

(function type() {
  if (count === text.length) {
    count = 1;
  }
  currentText = text[count];

  if (deleting) {
    letter = currentText.slice(0,--index);
  } else {
    letter = currentText.slice(0,++index);
  }

  document.querySelector(".main-animation").textContent = letter;
  if (letter.length === currentText.length) {
    deleting = true;
  }
  if (letter.length === 0) {
    count++;
    index = 0;
    deleting = false;
  }
  setTimeout(type,500);
}())

<div class="main-animation"></div>

,

这是我来的。如果有任何疑问，请告诉我。

function createAnimation(words,target,speed) {
  let wordIndex = 0;
  let i = 0;
  let erase = false;
  
  const handler = () => {
    const word = words[wordIndex];
    
    if (erase) {
        target.innerText = target.innerText.slice(0,-1);
        
        if (!target.innerText.length) {
            wordIndex = (wordIndex + 1) % words.length;
            i = 0;
            erase = false;
        }
    } else {
        target.innerText += word.charAt(i);
        i++;
        
        if (i === word.length) {
            erase = true;
        }
    }
  };
  
  let interval = null;
  
  return {
      start() {
          interval = setInterval(handler,1000 / speed)
      },stop() {
          clearInterval(interval);
      }
  }
}

const animation = createAnimation(
  ['design','create'],document.getElementById('target'),5 // [letters/s]
);

animation.start();

// TO STOP,CALL animation.stop()

<h1 id='target'></h1>