如何修改JS代码实现旧内容逐字删除后再逐字显示新内容？

要实现点击按钮先逐字删除旧内容、再逐字显示新内容的效果，需要解决原代码中全局变量冲突、缺少删除逻辑、重复触发动画这几个问题，修改后的代码如下：

let text = document.getElementById("txt");
let elem = document.getElementsByClassName("target")[0];
let word = elem.querySelector(".word");
let btn = document.getElementsByClassName("btn")[0];
let error = document.querySelector('#error');
let isAnimating = false; // 标记是否正在执行动画，防止重复触发
let timer = null; // 存储定时器ID，用于中断动画

word.style.color = "#ffe100";

btn.addEventListener("click", function() {
    // 如果正在执行动画，先中断之前的操作
    if (isAnimating) {
        clearTimeout(timer);
        isAnimating = false;
    }

    if (text.value.trim() === "") {
        error.style.opacity = '1.0';
        return;
    }

    error.style.opacity = '0.0';
    const newContent = text.value.trim();
    
    // 先执行逐字删除逻辑
    function deleteText() {
        isAnimating = true;
        if (word.textContent.length > 0) {
            word.textContent = word.textContent.slice(0, -1);
            timer = setTimeout(deleteText, 100);
        } else {
            // 删除完成后开始逐字添加新内容
            typeText(0);
        }
    }

    // 逐字添加新内容的逻辑
    function typeText(index) {
        if (index < newContent.length) {
            word.textContent += newContent.charAt(index);
            index++;
            timer = setTimeout(() => typeText(index), 100);
        } else {
            isAnimating = false;
        }
    }

    deleteText();
});

关键改动说明： #

• 添加isAnimating状态变量和timer变量：防止多次点击按钮时同时运行多个动画，点击时如果已有动画在执行，会先清除之前的定时器，重置状态。
• 拆分deleteText和typeText函数：把删除旧内容和添加新内容的逻辑分离，先执行删除，完成后自动触发添加。
• 使用局部变量管理索引：避免全局变量i在多次点击时的混乱问题。
• 增加trim()处理输入：防止用户输入空字符或纯空格的情况。

内容的提问来源于stack exchange，提问作者Kushtrim