JavaScript 使用随机setTimeout实现逐字输出时字符顺序混乱问题求助

问题根因 #

你的代码问题属于异步调度逻辑的设计疏漏，和JS内部线程调度机制无关。
setTimeout 属于异步API，所有定时器会在注册后几乎同时开始计时，等待指定延迟时间结束后，对应的回调函数才会进入事件循环队列等待执行。你给每个字符都分配了50~100ms的完全独立的随机延迟，哪个字符的延迟时间更短，对应的addChar回调就会先执行，字符拼接顺序自然完全随机。
当你使用固定延迟值时，因为for循环注册定时器的间隔远小于延迟值，所有回调会按注册顺序依次进入执行队列，所以输出顺序正常。

修复方案 #

要保留打字机随机速度的效果同时保证字符顺序，你可以选择以下两种实现方案：

方案1：累计延迟调度 #

每个字符的延迟时间在之前的总延迟基础上累加，保证后续字符的回调永远晚于前面的字符执行：

let content = "";
let desiredContent = "public static void main (String[] args) {\n\tSystem.out.println(\"Hello, World!\");\n}";
let lines = desiredContent.split("\n");
schedule();

function schedule() {
    // 累计延迟时间
    let totalDelay = 0;
    for (let i = 0; i < lines.length; i++) {
        for (let charIndex = 0; charIndex < lines[i].length; charIndex++) {
            const char = lines[i].charAt(charIndex);
            // 每个字符的间隔随机，总延迟累加
            totalDelay += Math.random() * 50 + 50;
            setTimeout(addChar, totalDelay, char);
        }
    }
}

function addChar(c) {
    content += c;
    codeBlockText.innerText = content;
}

方案2：async/await 串行实现 #

逻辑更直观，不容易出现异步顺序问题：

let content = "";
const desiredContent = "public static void main (String[] args) {\n\tSystem.out.println(\"Hello, World!\");\n}";

// 封装延迟方法
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

async function typeOutput() {
    for (let char of desiredContent) {
        // 每次等待随机延迟后再追加当前字符
        await delay(Math.random() * 50 + 50);
        content += char;
        codeBlockText.innerText = content;
    }
}

// 启动打字机效果
typeOutput();

异常输出参考 #

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