Typed.js初始化显示已有文本并循环的异常问题求助

嘿，这个坑我之前踩过！你遇到的问题核心在于：手动在span里写的"nice"和Typed.js待打字数组里的第一个元素重复了，导致循环重置时，Typed会直接清空初始文本再快速替换成"nice"，看起来就像闪现消失，而不是正常打字输出。给你几个实用的解决思路：

思路1：移除手动初始文本，用Typed原生配置实现默认显示 #

这是最省心的方案，完全贴合Typed的逻辑，不用额外手动操作DOM。直接去掉span里的"nice"，然后通过配置让第一个词加载时就显示，同时保留循环打字的效果：

// HTML里只需要空的span：<span class="typed-element"></span>
const typed = new Typed('.typed-element', {
  strings: ['nice', 'cool', 'awesome', 'fantastic'],
  typeSpeed: 50, // 打字速度
  backSpeed: 30, // 回退速度
  loop: true,
  startDelay: 0, // 页面加载后立即开始，第一个词直接显示
  // 可选：如果担心某些环境下startDelay不生效，可以加onBegin事件确保初始显示
  onBegin: function(self) {
    self.el.textContent = 'nice';
  }
});

这样页面加载时"nice"会直接显示，后续循环时，Typed会正常回退所有文本，再重新逐个打字输出，包括第一个"nice"。

思路2：修改循环重置逻辑，强制第一个词重新打字 #

如果不想移除初始的span文本，可以监听Typed的onReset事件，在重置完成后手动清空文本，让它从空开始重新打字第一个词：

const typed = new Typed('.typed-element', {
  strings: ['nice', 'cool', 'awesome', 'fantastic'],
  typeSpeed: 50,
  backSpeed: 30,
  loop: true,
  onReset: function(self) {
    // 重置后清空文本，让Typed从空开始打字第一个词
    self.el.textContent = '';
    self.currentString = 0; // 回到第一个字符串的索引
    self.start(); // 重新开始打字
  }
});

这个方法会覆盖默认的重置行为，确保每次循环都从空白状态开始打字，解决闪现的问题。

思路3：自定义循环流程，绕过默认重置逻辑 #

如果默认的loop逻辑满足不了需求，可以关闭原生循环，手动在一轮完成后重新初始化Typed：

function startTypedLoop() {
  const typed = new Typed('.typed-element', {
    strings: ['nice', 'cool', 'awesome', 'fantastic'],
    typeSpeed: 50,
    backSpeed: 30,
    loop: false, // 关闭原生循环
    onComplete: function(self) {
      // 一轮完成后，清空文本，延迟1秒再重新开始
      setTimeout(() => {
        self.reset();
        startTypedLoop();
      }, 1000);
    }
  });
}

// 页面加载时先显示"nice"，再启动循环
document.querySelector('.typed-element').textContent = 'nice';
setTimeout(startTypedLoop, 1500); // 延迟1.5秒让用户看到初始的"nice"

这个方案灵活性最高，你可以完全控制循环的间隔和重置时机。

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