如何在同一页面中正确初始化多个 Typewriter.js 实例_技术教程

本文详解 typewriter.js 多实例初始化失败的常见原因（如 dom 元素未就绪、id 选择器错误或库加载时机不当），并提供可复用的健壮解决方案，支持多语言、多容器、独立配置的打字效果。

在使用 Typewriter.js 实现多语言打字效果时，常见的错误并非语法问题，而是DOM 元素获取时机与初始化逻辑不匹配。你遇到的报错：

Uncaught Error: Could not find container element

明确指向 new Typewriter(selector, options) 中传入的选择器（如 '#english-typewriter'）未能在执行时找到对应 DOM 节点——这通常发生在脚本运行早于 HTML 解析完成，或目标元素根本不存在于当前页面。

✅ 正确做法：确保 DOM 就绪 + 显式元素引用

避免直接使用 CSS 选择器字符串（尤其是跨页面复用时易出错），推荐改用 document.getElementById() 显式获取元素，并包裹在 DOM 加载安全钩子中：

// ✅ 推荐写法：等待 DOM 完全加载后初始化
document.addEventListener('DOMContentLoaded', () => {
  const spanishEl = document.getElementById('typewriter');
  const englishEl = document.getElementById('english-typewriter');

  // 检查元素是否存在，避免静默失败
  if (!spanishEl) console.warn('Spanish typewriter container #typewriter not found');
  if (!englishEl) console.warn('English typewriter container #english-typewriter not found');

  // 初始化西班牙语实例
  if (spanishEl) {
    const spanishInstance = new Typewriter(spanishEl, {
      strings: ['hoteles', 'restaurantes', 'agencias de viaje', 'guía de turistas'],
      autoStart: true,
      loop: true,
      delay: 75
    });
  }

  // 初始化英语实例
  if (englishEl) {
    const englishInstance = new Typewriter(englishEl, {
      strings: ['hotels', 'restaurants', 'travel agencies', 'tour guides'],
      autoStart: true,
      loop: true,
      delay: 75
    });
  }
});

⚠️ 关键注意事项

不要跨页面复用同一份 JS：若两个 typewriter 分布在不同 HTML 页面，请确保每页只初始化当前页面存在的容器。否则 getElementById() 返回 null，触发 Typewriter 构造函数报错。
检查库加载顺序：Typewriter.js 必须在
避免 jQuery 冲突（如你报错中出现 jquery.min.js）：Typewriter.js 是纯 JS 库，无需 jQuery。若项目强制依赖 jQuery，请确保 Typewriter 初始化代码不在 $(document).ready() 外部执行；更推荐完全移除 jQuery 依赖以简化调试。

? 进阶技巧：封装为可复用函数

为提升可维护性，可抽象为初始化函数：

function initTypewriter(selector, options) {
  const el = document.querySelector(selector);
  if (!el) {
    console.error(`Typewriter: Element "${selector}" not found.`);
    return null;
  }
  return new Typewriter(el, { ...options, autoStart: true });
}

// 使用示例
document.addEventListener('DOMContentLoaded', () => {
  initTypewriter('#typewriter', {
    strings: ['hoteles', 'restaurantes'],
    loop: true,
    delay: 75
  });

  initTypewriter('#english-typewriter', {
    strings: ['hotels', 'restaurants'],
    loop: true,
    delay: 75
  });
});

✅ 总结

Typewriter.js 多实例失效的根本原因几乎总是 “找不到容器元素”。解决路径清晰而简单：
1️⃣ 使用 document.getElementById() 或 document.querySelector() 显式获取元素；
2️⃣ 将初始化逻辑置于 DOMContentLoaded 事件内；
3️⃣ 添加存在性校验，让错误可见、可调试；
4️⃣ 确保 Typewriter 库已正确加载且无其他脚本干扰。

遵循以上实践，即可稳定实现多语言、多位置、独立配置的打字动画效果。