JavaScript中setTimeout为何让所有字符1秒后同时打印？求逐字符输出方案

问题根源 #

你写的两层for循环是同步代码，会一次性执行完所有迭代，把所有setTimeout任务全部加入浏览器的异步任务队列。而所有setTimeout的延迟时间都设为1000毫秒，所以1秒后这些任务会被批量触发，导致所有字符同时打印。

虽然你用let声明循环变量（避免了旧版var导致的变量捕获问题），但统一的延迟时间才是导致同步输出的核心原因。

修复方案 #

要实现逐字符间隔1秒输出，需要给每个字符对应的setTimeout设置递增的延迟时间。比如第一个字符延迟1000ms，第二个2000ms，第三个3000ms……以此类推。

方案一：累计延迟时长

let arr = ["Hello", "Random", "Word"];
let delay = 0;

for (let i = 0; i < arr.length; i++) {
    for (let k = 0; k < arr[i].length; k++) {
        setTimeout(() => {
            console.log(arr[i][k]);
        }, delay);
        delay += 1000; // 每个字符的延迟增加1秒
    }
}

方案二：按总字符位置计算延迟

let arr = ["Hello", "Random", "Word"];
let charIndex = 0;

for (let i = 0; i < arr.length; i++) {
    for (let k = 0; k < arr[i].length; k++) {
        setTimeout(() => {
            console.log(arr[i][k]);
        }, charIndex++ * 1000);
    }
}

这两种方式都能让每个setTimeout的延迟时间依次递增，从而实现逐字符间隔1秒输出的效果。

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