TypedJs批量打字效果未生效，如何实现页面末尾的批量打字效果？

嘿，我懂你的需求——普通的单个打字效果已经搞定，但想要实现批量的打字效果（不管是多个元素依次触发，还是单个元素里批量输出多段内容），这就给你详细拆解怎么用Typed.js实现！

场景1：多个独立元素分别实现打字效果 #

这种情况适合页面上有多个需要打字动画的区块，比如卡片文本、多个标题。操作很简单，只需要遍历元素逐个初始化Typed实例就行：

1. 先给每个目标元素加统一的类，再用data-*属性存要打印的文本：

<div class="typed-block" data-content="这是第一个批量打字的区块内容"></div>
<div class="typed-block" data-content="这是第二个批量打字的区块内容"></div>
<div class="typed-block" data-content="这是第三个批量打字的区块内容"></div>

2. 用JS遍历所有目标元素，逐个初始化Typed，还可以加延迟让动画更有层次感：

// 获取所有需要批量处理的元素
const typedBlocks = document.querySelectorAll('.typed-block');

// 遍历并初始化每个元素的打字效果
typedBlocks.forEach((block, index) => {
  // 给每个元素设置延迟，实现依次触发的效果
  setTimeout(() => {
    new Typed(block, {
      strings: [block.dataset.content], // 从data属性读取文本
      typeSpeed: 50, // 打字速度（数值越小越快）
      backSpeed: 0, // 如果不需要回退效果就设为0
      loop: false, // 是否循环播放
      showCursor: true // 显示打字光标
    });
  }, index * 700); // 每个元素延迟700ms启动，可根据需求调整
});

场景2：单个元素内批量输出多组文本 #

如果是想在同一个容器里，批量输出多段带打字效果的内容（比如多段落、列表项），可以把每段内容作为strings数组的一项，甚至直接写HTML标签来保留格式：

1. 先准备容器：

<div id="multi-content"></div>

2. 初始化Typed时，把多组内容放进strings数组：

new Typed('#multi-content', {
  strings: [
    '欢迎使用批量打字效果！',
    '<br><br>这是第二段带换行的内容',
    '<br><br><strong>这是第三段加粗的内容</strong>',
    '<br><br><ul><li>✅ 支持HTML标签</li><li>✅ 可自定义速度</li><li>✅ 灵活控制顺序</li></ul>'
  ],
  typeSpeed: 40,
  backDelay: 1200, // 打完一段后停留的时间
  loop: false,
  showCursor: false // 不需要光标就设为false
});

这样每一组内容都会按顺序完成打字动画，实现单个容器内的批量输出。

额外小技巧：统一控制所有批量实例 #

如果需要统一暂停、继续所有打字动画，可以把所有Typed实例存进数组，之后就能批量操作：

const typedInstances = [];

typedBlocks.forEach((block, index) => {
  const instance = new Typed(block, {
    // 你的配置项
  });
  typedInstances.push(instance);
});

// 比如点击按钮暂停所有动画
document.getElementById('pause-all').addEventListener('click', () => {
  typedInstances.forEach(instance => instance.pause());
});

// 点击按钮继续所有动画
document.getElementById('resume-all').addEventListener('click', () => {
  typedInstances.forEach(instance => instance.start());
});

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