如何检测JS类是否已创建？不可编辑外部脚本加载的JS类怎么判断就绪？

核心思路 #

外部脚本加载、解析、执行的耗时受网络、脚本体积、浏览器调度等多因素影响，固定等待时间的方案天生不可靠，主动检测目标类是否挂载到全局是最稳定的实现方式。

注：JS类本质是构造函数，只要判断目标类对应的标识符类型为function即可确认创建完成。

方案1：原生JS实现（无需依赖） #

适配你无法控制外部脚本加载时机的场景，通过短间隔轮询检测状态，超时后抛出异常：

// 配置项：替换为你要检测的实际类名
const TARGET_CLASS = 'YourExternalClass';
// 轮询间隔，单位：毫秒
const CHECK_INTERVAL = 100;
// 最大等待时间，单位：毫秒，超时后终止检测
const MAX_WAIT = 10 * 1000;

let waitTime = 0;
const timer = setInterval(() => {
  // 如果类挂载在特定命名空间下，比如window.Utils.MyClass，改为判断typeof window?.Utils?.MyClass === 'function'
  if (typeof window[TARGET_CLASS] === 'function') {
    clearInterval(timer);
    // 类加载完成，在这里写你的业务逻辑
    const instance = new window[TARGET_CLASS]();
  }

  waitTime += CHECK_INTERVAL;
  if (waitTime >= MAX_WAIT) {
    clearInterval(timer);
    throw new Error(`加载${TARGET_CLASS}超时，请检查外部脚本是否正常引入`);
  }
}, CHECK_INTERVAL);

方案2：jQuery $.getScript 实现 #

如果你可以主动触发外部脚本的加载，用$.getScript加载完成后直接检测，无需轮询：

// 替换为外部脚本的实际地址
const SCRIPT_URL = 'https://你的外部脚本地址.js';
const TARGET_CLASS = 'YourExternalClass';

$.getScript(SCRIPT_URL)
  .done(() => {
    if (typeof window[TARGET_CLASS] !== 'function') {
      throw new Error(`脚本加载完成，但未找到${TARGET_CLASS}类`);
    }
    // 类已就绪，执行业务逻辑
    const instance = new window[TARGET_CLASS]();
  })
  .fail(() => {
    throw new Error('外部脚本加载失败，请检查地址是否正确');
  });

搜索技巧补充 #

搜索JS类相关问题时，加上es6或javascript constructor关键词，即可过滤掉HTML/CSS相关的class内容，精准找到JS类的解决方案。

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