基于自调用setTimeout的打字机函数更新变量仅返回首字符问题

• setTimeout属于异步API，调用后不会阻塞同步代码的执行，首次调用typeWriter()时仅会完成1次字符拼接就返回当前x的值（仅包含第一个字符），后续定时器触发的函数执行不会修改已经完成赋值的x初始值
• 原代码的DOM更新逻辑放在了脚本同步执行阶段，只会执行1次，不会随着后续字符拼接同步更新页面内容

<!DOCTYPE html>
<html>
<body>

<h1>Typewriter</h1>

<p id="demo"></p>

<script>
var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;
var x = "";
// 直接调用函数，不需要接收返回值
typeWriter();

function typeWriter() {
  if (i < txt.length) {
    x += txt.charAt(i);
    // 每次拼接完成后立即更新DOM
    document.getElementById("demo").innerHTML = x;
    i++;
    setTimeout(typeWriter, speed);
  } else {
    // 打字全部完成后的逻辑可以写在这里，此时x就是全量文本
  }
}
</script>

</body>
</html>

• 移除了外层x = typeWriter()的赋值逻辑和外层单独的DOM更新语句，异步函数的全量拼接结果无法在同步执行阶段拿到
• 将DOM更新逻辑移入typeWriter函数内部，每次拼接新字符后立即更新页面，即可实现逐字输出的打字机效果
• 如果需要打字完成后使用全量文本，相关逻辑可以放在上述代码的else分支中执行

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