使用嵌套for循环实现打字机效果的逻辑问题咨询

现有代码的问题 #

你的代码无法实现逐字输出的打字机效果，核心原因是JS单线程的同步执行特性：

• 嵌套for循环属于同步代码，会在极短时间内跑完所有字符拼接逻辑，浏览器只会在所有同步代码执行完成后做一次重绘，所以你只能看到所有字符串拼接完成的最终结果，看不到逐字输出的过程
• 你仅添加了一个setTimeout，只是把整个循环的执行时间向后延迟了200ms，并没有给每个字符的更新添加渲染间隔
• 没有清空letter变量的逻辑，所有字符串会直接拼接在一起，无法实现逐个切换展示的效果

嵌套for循环的正确实现逻辑 #

你预期的嵌套循环逻辑本身是成立的，只要给内层循环的每次字符拼接添加异步延迟即可，这里配合async/await实现的示例如下：

const changingtext = document.querySelector(".text");
const arr = ["hard","Fun","a Journey","Career", "Countless hours"];
// 封装延迟工具函数
const sleep = (time) => new Promise(resolve => setTimeout(resolve, time));

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

async function type(){
    // 外层循环：遍历所有要展示的文本
    for(let i=0; i<arr.length; i++){
        const currentStr = arr[i];
        let letter = "";
        // 内层循环：遍历当前文本的每个字符
        for(let j=0; j<currentStr.length; j++){
            letter += currentStr.charAt(j);
            changingtext.textContent = letter;
            // 每个字符输出后等待200ms，再处理下一个字符
            await sleep(200);
        }
        // 可选：当前文本完全展示后，停顿1s再展示下一个文本
        await sleep(1000);
    }
}

逻辑拆解 #

• 外层循环作用：逐个取出你预定义的arr数组中的每段文本，作为当前要展示的目标内容
• 内层循环作用：逐位取出当前文本的每个字符，拼接到展示字符串中后更新DOM，等待指定时长后再执行下一轮循环，由此产生逐字输出的视觉效果

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