如何在外部脚本未加载时终止脚本执行及修复Checkout未定义错误

嘿，这俩问题其实是同一个核心痛点：得确保你的代码在依赖的外部脚本完全加载好之后再跑，不然就会出现Checkout is not defined这种报错，也能顺便解决“外部脚本没加载就停止自己脚本执行”的需求。下面给你几个实用的办法，按上手难度和可靠性排序：

1. 调整脚本加载顺序（最简单直接） #

如果能改页面里脚本的位置，这绝对是首选。把外部的checkout.js放在你的自定义脚本前面，而且都用同步加载（别加async/defer属性）。因为同步脚本是按顺序执行的，浏览器会等外部脚本加载完、解析完，才会运行你的代码。

举个例子：

<!-- 先加载外部依赖 -->
<script src="https://example.com/checkout.js"></script>
<!-- 再放你的脚本 -->
<script>
  $(document).ready(function() {
    Checkout.dosomething();
  });
</script>

要是你的代码不需要等整个DOM就绪，甚至可以去掉$(document).ready，直接写Checkout.dosomething();，更稳妥。

2. 监听外部脚本的加载/失败事件 #

要是没法调整脚本顺序（比如外部脚本是页面其他模块插进来的），那就监听它的加载状态。等它加载完成再执行你的代码，加载失败就直接停掉自己的脚本：

// 先找到外部脚本标签
const checkoutScript = document.querySelector('script[src="https://example.com/checkout.js"]');

if (checkoutScript) {
  // 先判断脚本是不是已经加载好了
  if (checkoutScript.readyState === 'complete' || checkoutScript.readyState === 'loaded') {
    Checkout.dosomething();
  } else {
    // 监听加载完成事件
    checkoutScript.addEventListener('load', function() {
      Checkout.dosomething();
    });
    // 别忘了处理加载失败的情况——这就是你第一个问题的答案
    checkoutScript.addEventListener('error', function() {
      console.error('Checkout脚本加载失败，停止执行后续代码');
      // 这里可以抛出错误或者直接return，终止脚本
      throw new Error('依赖脚本加载失败');
    });
  }
} else {
  // 要是页面里没这个脚本标签，咱可以动态创建并加载
  const script = document.createElement('script');
  script.src = 'https://example.com/checkout.js';
  script.onload = () => Checkout.dosomething();
  script.onerror = () => {
    console.error('加载Checkout脚本失败，终止执行');
    throw new Error('依赖脚本加载失败');
  };
  document.body.appendChild(script);
}

3. 轮询检查Checkout对象是否存在 #

如果上面两种方法都用不了（比如外部脚本是异步加载的，没法监听），那就用轮询的方式，定期检查Checkout有没有被定义，直到它出现再执行，超时就停止：

function executeWhenReady() {
  if (typeof Checkout !== 'undefined') {
    // 依赖存在，执行代码
    Checkout.dosomething();
  } else {
    // 每隔100毫秒查一次，别太频繁，避免占资源
    setTimeout(executeWhenReady, 100);
  }
}

// 启动轮询
executeWhenReady();

// 加个超时保护，防止无限等待——解决你第一个问题的点
setTimeout(() => {
  if (typeof Checkout === 'undefined') {
    console.error('等待Checkout脚本加载超时，停止执行');
    // 这里可以做终止后续脚本的操作，比如抛出错误
    throw new Error('依赖加载超时');
  }
}, 2000); // 最多等2秒，时间你可以自己调

针对第一个问题的快速处理 #

要是就想简单粗暴点，在执行代码前先判断依赖是否存在，不存在就直接停：

$(document).ready(function() {
  // 先检查Checkout是否已定义
  if (typeof Checkout === 'undefined') {
    console.error('Checkout脚本未加载，停止执行');
    return; // 终止当前函数，后面的代码就不跑了
  }
  // 没问题再执行
  Checkout.dosomething();
});

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