如何实现文本逐字母打印并按顺序完成元素打字效果？

一、如何实现文本逐字母打印效果？ #

逐字母打字效果的核心逻辑是拆分文本→逐个拼接字符→添加随机延迟→更新元素内容，具体实现思路：

1. 编写基于Promise的延迟函数wait，用于控制字符间的打字间隔
2. 实现getRandomBetween函数，根据元素自定义的速度范围生成随机延迟时间，模拟真实打字的不规则节奏
3. 异步函数draw处理单个元素的打字动画：
   • 保存元素原始文本内容
   • 循环遍历每个字符，逐个拼接到临时变量中
   • 每次拼接后更新元素的文本内容
   • 根据元素data-type-min和data-type-max属性获取延迟时间，等待后再处理下一个字符

二、修改代码实现元素顺序打字 #

原代码用forEach直接调用draw，会导致所有带data-type属性的元素同时启动打字动画。要实现上一个元素完成打字后再启动下一个，需将并行执行改为串行执行，具体修改如下：

修改后的JavaScript代码 #

// 基于Promise的延迟函数
function wait(ms = 0) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 生成指定范围内的随机整数，用于控制打字延迟
function getRandomBetween(min = 20, max = 150, randomNumber = Math.random()) {
  return Math.floor(randomNumber * (max - min) + min);
}

// 单个元素的打字动画逻辑
async function draw(el) {
  const text = el.textContent;
  let soFar = '';
  // 清空元素内容，避免原始文本闪烁
  el.textContent = '';
  // 逐个字符处理
  for (const letter of text) {
    soFar += letter;
    el.textContent = soFar;
    // 获取元素自定义的打字速度范围
    const { typeMin, typeMax } = el.dataset;
    const waitTime = getRandomBetween(typeMin, typeMax);
    await wait(waitTime);
  }
}

// 串行执行所有元素的打字动画
async function typeInSequence() {
  const elements = document.querySelectorAll('[data-type]');
  // 使用for...of循环，确保上一个元素完成后再执行下一个
  for (const el of elements) {
    await draw(el);
  }
}

// 启动顺序打字动画
typeInSequence();

对应的HTML代码 #

<h2 data-type data-type-min="100" data-type-max="300">
  这段文本会慢速打字
</h2>
<h2 data-type data-type-min="20" data-type-max="80">
  这段文本会快速打字
</h2>
<h2 data-type>这段文本会使用默认速度打字</h2>

关键修改点说明 #

1. 新增typeInSequence异步函数，用for...of遍历所有目标元素，每次调用draw时使用await，确保上一个元素的打字动画完成后才开始下一个
2. 在draw函数中新增el.textContent = ''，解决动画开始前原始文本闪烁的问题
3. 将原有的forEach并行调用改为串行的异步循环，彻底解决多个元素同时打字的问题

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