Typewriter JS作用域问题求助：deleteAll()在函数内无法执行

问题原因 #

Typewriter JS 基于任务队列机制执行动画逻辑：

• 调用start()后，实例会按顺序执行队列中的所有任务
• 第一个示例中，typeString('Hello, world')和deleteAll()都被提前加入队列，start()启动后会依次执行
• 第二个示例中，start()仅执行了队列中的typeString任务，执行完毕后实例进入 idle 状态，此时在点击事件中直接调用deleteAll()，方法不会被加入执行队列，因此无效果

解决方法 #

方法1：点击时手动启动队列执行

在点击事件中调用deleteAll()后，通过start()触发队列执行：

const typewriter = new Typewriter('#typewriter');

typewriter.start();
typewriter.typeString('Hello, world');

const yes = document.querySelector("#yes");
yes.addEventListener('click', function() {
  typewriter.deleteAll().start();
});

方法2：初始化时开启循环模式

如果需要实例持续保持可执行状态，初始化时配置loop: true，这样队列执行完毕后实例不会进入 idle 状态：

const typewriter = new Typewriter('#typewriter', {
  loop: true
});

typewriter.start();
typewriter.typeString('Hello, world');

const yes = document.querySelector("#yes");
yes.addEventListener('click', function() {
  typewriter.deleteAll();
});

补充说明 #

两种方法的区别：

• 方法1适合仅在点击时触发单次操作的场景，不会让实例持续循环
• 方法2适合需要实例保持活跃、可随时响应交互的场景

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