Typed.js代码未执行完毕就触发后续函数，求可行解决方案

当前代码中，启动Typed.js打字效果的myFunction不会阻塞后续代码执行，导致newFunction会在打字动画完成前就开始运行。以下是两种可靠的解决方式：

方案1：使用Typed.js内置的onComplete回调 #

Typed.js提供了onComplete钩子，会在所有字符串的打字、回退流程全部结束后触发，我们可以在这里调用后续函数：

<html>
<body>
<button onclick="myFunction()">Button</button>
<div>
  <p id="coolArray"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
function myFunction() {
  var typed = new Typed("#coolArray", {
    strings: ["pHolder1", "pHolder2", "pHolder3", "pHolder4", "pHolder5", "pHolder6", "pHolder7", "pHolder8"],
    typeSpeed:  70,
    backSpeed: 70,
    loop: false,
    showCursor: false,
    smartBackspace: false,
    // 打字完成后触发的回调
    onComplete: function() {
      newFunction();
    }
  });
}
function newFunction() {
  for (i = 1; i < 50; i++) {
    console.log("执行后续操作：" + i);
  }
}
</script>
</body>
</html>

关键说明：

• 确保loop设置为false，否则打字动画会无限循环，onComplete永远不会触发
• 移除了原代码中无效的<p onload="myFunction">，p元素不支持onload事件

方案2：封装为Promise，用async/await控制流程 #

如果需要更灵活的异步流程控制（比如串联多个异步操作），可以把Typed.js的执行逻辑封装成Promise：

<html>
<body>
<button onclick="handleClick()">Button</button>
<div>
  <p id="coolArray"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
// 将Typed执行逻辑封装为Promise
function runTyped() {
  return new Promise(resolve => {
    new Typed("#coolArray", {
      strings: ["pHolder1", "pHolder2", "pHolder3", "pHolder4", "pHolder5", "pHolder6", "pHolder7", "pHolder8"],
      typeSpeed:  70,
      backSpeed: 70,
      loop: false,
      showCursor: false,
      smartBackspace: false,
      onComplete: resolve // 完成时resolve Promise
    });
  });
}

function newFunction() {
  for (i = 1; i < 50; i++) {
    console.log("执行后续操作：" + i);
  }
}

// 使用async/await确保顺序执行
async function handleClick() {
  await runTyped(); // 等待打字动画完成
  newFunction(); // 执行后续函数
}
</script>
</body>
</html>

这种方式可以让你在更复杂的场景下，轻松控制多个异步任务的执行顺序。

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