javascript - 我正在尝试一个接一个地打印字母

Question

我试图一个接一个地打印一个字母，但这段代码只等待 100 毫秒，然后没有停顿地打印值。知道为什么会发生这种情况以及如何解决它吗？ 代码:

    for (let i = 0; i < welcText.length; i++) {
        setTimeout(()=>{
            welcome.innerText += welcText[i];
        },100);
    }

Answer 1

请注意，setTimeout 实际上不会延迟后面代码的运行；它只是安排将来发生的事情。所以所有字母在 100 毫秒后同时添加。

修复它的最直接方法是通过将延迟乘以字母索引 (i * 100)，使每个后续超时等待更长的时间:

const welcome = document.getElementById('welcome');
const welcText = 'Welcome!';

for (let i = 0; i < welcText.length; i++) {
    setTimeout(() => {
        welcome.innerText += welcText[i];
    }, i * 100);
}

<div id="welcome"></div>