如何用setTimeout异步调用函数两次，实现打字机先写后删效果？

问题根源 #

1. 原typeWriter函数没有返回Promise，无法让then等待异步操作完成
2. 调用时then(typeWriter("hello world"))是立即执行函数，而非将其作为回调传递给then
3. 全局变量i会导致两次调用的状态混乱，无法正确控制打字/删除的步骤

修改后的代码 #

首先重构typeWriter，让它返回Promise，内部管理执行状态：

function typeWriter(toWrite, isDelete = false) {
  return new Promise((resolve) => {
    let i = 0; // 用局部变量替代全局i，避免状态污染
    const element = document.getElementById("typewrite");

    function executeStep() {
      if (!isDelete && i < toWrite.length) {
        element.innerHTML += toWrite.charAt(i);
        i++;
        const speed = Math.random() * 100 + 100;
        setTimeout(executeStep, speed);
      } else if (isDelete && i < toWrite.length) {
        element.innerHTML = element.innerHTML.slice(0, -1);
        i++;
        setTimeout(executeStep, 100);
      } else {
        // 所有打字/删除步骤完成，触发Promise resolve
        resolve();
      }
    }

    executeStep();
  });
}

然后按顺序调用，确保前一步完成后再执行下一步：

// 先写入"hello world"，完成后再删除"world"对应长度的内容
typeWriter("hello world")
  .then(() => typeWriter("world", true));

关键说明 #

• 让typeWriter返回Promise，才能通过then链式调用实现顺序执行
• then中必须传递一个返回Promise的函数（() => typeWriter(...)），而非直接执行函数（否则会同步触发）
• 用局部变量i替代全局变量，避免两次调用的状态互相干扰

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