技术求助：实现逐字打印-删除-再打印文本动画遇异常

我需要实现这样的文本动画效果：先逐字打印一段文本，打印完成后以相同速度逐字删除这段文本，最后再用同样速度逐字打印第二段文本。

第一次尝试的代码及问题 #

我先写了如下代码：

JavaScript #

const text1 = "Your first sentence here"; // 输入第一段文本
const text2 = "Your second sentence here"; // 输入第二段文本

let i = 0;

function typeSentence(text, element) {
  const interval = setInterval(() => {
    if (i === text.length) {
      clearInterval(interval);
      if (text === text1) {
        clearText();
      }
    } else {
      element.text(element.text() + text[i]);
      i++;
    }
  }, 100); // 动画速度（可调整）
}

function clearText() {
  const interval = setInterval(() => {
    if (!$("#loading-text").text()) {
      clearInterval(interval);
      typeSentence(text2); // 调用打印第二段文本
    } else {
      $("#loading-text").text($("#loading-text").text().substring(0, $("#loading-text").text().length - 1));
    }
  }, 100); // 动画速度（可调整）
}

typeSentence(text1, $('#loading-text'));

CSS #

#loading-text {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 20px auto;
    width: 50%;
    opacity: 1;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="loading-text"></div>

这段代码能正常打印并删除第一段文本，但无法打印第二段文本。

修改后的代码及新问题 #

根据之前的思路，我对代码做了修改：

JavaScript #

const text1 = "Your first sentence here"; // 输入第一段文本
const text2 = "Your second sentence here"; // 输入第二段文本

const texts = [text1, text2]; // 文本数组
const element = $('#loading-text'); // 显示文本的元素

let i = 0;
let currentTextIndex = 0; // 当前文本在数组中的索引

function typeSentence() {
  if (i < texts[currentTextIndex].length) {
    element.text(element.text() + texts[currentTextIndex][i]);
    i++;
  } else {
    if (currentTextIndex < texts.length - 1) {
      // 清空元素并切换到下一段文本
      clearText();
    } else {
      clearInterval(tId); // 所有文本完成后停止动画
    }
  }
}

function clearText() {
  i = 0; // 重置字符索引
  currentTextIndex++; // 切换到下一段文本
  element.text(""); // 直接清空元素内容
}

// 开始打印第一段文本
const tId = setInterval(typeSentence, 100); // 动画速度（可调整）

CSS #

#loading-text, #loading-text2 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 20px auto;
    width: 50%;
    opacity: 1;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="loading-text"></div>

这次修改后，代码能正常打印第二段文本，但出现了新问题：第一段文本打印完成后没有按预期逐字删除，而是直接立即消失，随后开始打印第二段文本。

内容的提问来源于stack exchange，提问作者Wp-PHP