为何setTimeout未按预期生效？字符无法间隔1秒输出

核心错误点 #

• setTimeout 回调参数错误：你直接写了 setTimeout(console.log(letter), 1000)，这会立即执行 console.log(letter)，并把执行结果（undefined）传给setTimeout，相当于没设置有效回调，所以所有字符瞬间输出。
• 闭包导致的变量共享问题：就算改成箭头函数，循环里的index是共享变量，当回调执行时，index已经走到了数组长度值，会出现输出异常。
• 未将文本节点添加到页面：你创建了TextNode但没把它追加到paragraph里，所以页面上不会显示内容。

修正后的递归实现代码 #

const screenDiv = document.getElementById('screen');

function outputKorv() {
    const paragraph = document.createElement('p');
    screenDiv.appendChild(paragraph);
    const korv = ['k', 'o', 'r', 'v'];
    let index = 0;
  
    function printNextLetter() {
        if (index < korv.length) {
            const letter = document.createTextNode(korv[index]);
            paragraph.appendChild(letter); // 将字符添加到页面段落
            console.log(korv[index]); // 控制台同步输出
            index++;
            setTimeout(printNextLetter, 1000); // 延迟1秒后调用自身，实现间隔输出
        }
    }

    printNextLetter();
}

outputKorv();

另一种循环实现方式（利用块级作用域） #

如果想用循环写法，可以借助let的块级作用域特性，同时设置递增的延迟时间：

const screenDiv = document.getElementById('screen');

function outputKorv() {
    const paragraph = document.createElement('p');
    screenDiv.appendChild(paragraph);
    const korv = ['k', 'o', 'r', 'v'];
  
    for (let index = 0; index < korv.length; index++) {
        // let创建的index在每个循环迭代中都是独立变量
        setTimeout(() => {
            const letter = document.createTextNode(korv[index]);
            paragraph.appendChild(letter);
            console.log(korv[index]);
        }, index * 1000); // 每个延迟依次增加1秒，确保字符按顺序间隔输出
    }
}

outputKorv();

说明 #

• 递归方式逻辑直观，每次输出完成后延迟1秒触发下一次输出，直到所有字符处理完毕。
• 循环方式通过let解决变量共享问题，用index * 1000让每个setTimeout的延迟时间递增，避免所有回调同时执行。
• 两种写法都完成了**在HTML页面逐个字符输出"korv"**的需求，同时控制台也会同步输出对应字符。

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