如何跟踪type函数完成状态、添加点击事件处理器加速运行并替换文本

实现方案 #

你可以通过新增状态标识、绑定点击事件、补充完成回调三个部分的改动实现需求，修改后的完整代码如下：

function typeCode(lineItem) {
    const codeLine = lineItem.querySelector(".type"),
      columnBlock = lineItem.querySelector(".column"),
      targetCode = codeLine.innerHTML, // 存储最终目标文本
      lengthContent = lineItem.querySelector(".hide-text").innerHTML.split('br').length;

    let i = 0,
      isTag = false,
      text = '',
      isComplete = false, // 记录打字是否完成
      typeSpeed = 40, // 默认打字速度
      timer = null; // 存储定时器ID，方便清理

    // 初始化行号
    columnBlock.innerHTML = Array(lengthContent + 1).fill(0).map((_, i) => `<span>${i+1}</span>`).join('<br>');

    // 绑定点击加速事件
    lineItem.addEventListener('click', () => {
      if (isComplete) return;
      // 可以按需调整为更快的速度，设为0则直接完成打字
      typeSpeed = 0;
      // 清理当前待执行的定时器，立刻触发下一次打字
      if (timer) clearTimeout(timer);
      type();
    });

    // 打字核心逻辑
    function type() {
      text = targetCode.slice(0, ++i);
      
      // 打字完成逻辑
      if (text === targetCode) {
        isComplete = true;
        lineItem.dataset.typeComplete = 'true'; // 给dom添加完成状态标识
        codeLine.innerHTML = targetCode; // 替换为最终目标文本
        return;
      }

      codeLine.innerHTML = text;
      let char = text.slice(-1);
      if (char === '<') isTag = true;
      if (char === '>') isTag = false;

      // 标签内容不需要延迟，直接输出
      if (isTag) return type();
      timer = setTimeout(type, typeSpeed);
    }

    // 启动打字
    type();
}

核心改动说明 #

• 状态跟踪：通过内部变量isComplete和dom自定义属性data-type-complete记录打字执行状态，外部逻辑可以直接读取该属性判断对应区块的打字是否完成
• 点击加速：给区块绑定点击事件，触发后直接降低打字间隔到0，同时清理等待中的定时器立刻执行打字逻辑，也可以根据需求将typeSpeed调整为10~20等更小的数值实现加速而非直接完成的效果
• 完成替换：当打字内容和目标文本完全一致时，直接将文本区域内容设置为最终目标内容，避免打字过程中可能出现的半标签解析异常，同时触发完成状态更新

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