动态加载JS脚本时后续脚本报未定义错误、嵌套回调后页面异常如何解决

问题根因 #

1. 初始报错的原因：jQuery.getScript 是异步请求方法，不会阻塞后续静态<script>标签的加载执行。触发testFile.js的请求后，浏览器会立即加载执行ok1.js、ok2.js，此时testFile.js还未请求返回，getFile0自然未定义。
2. 嵌套done回调后功能异常的常见原因：
   • 没有删除页面中原有的ok1.js、ok2.js静态<script>标签，导致两个脚本被执行两次：第一次静态加载时没有getFile0定义，即使后续动态加载执行无报错，第一次执行已经抛出了隐藏错误或污染了全局变量，影响功能正常运行。
   • 部分原有逻辑依赖DOMContentLoaded、window.onload等页面事件，动态加载脚本时这些事件已经触发完成，绑定在事件里的初始化逻辑没有执行。

正确解决步骤 #

1. 先删除页面中原有ok1.js、ok2.js的静态引入标签，所有依赖脚本统一通过动态加载保证执行顺序。
2. 补全URL参数获取逻辑，优化加载代码（避免回调嵌套，增加错误捕获方便定位问题）：

// 从URL参数获取testFile的文件名
function getQueryParam(name) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(name);
}
const testFileName = getQueryParam('testFile') || 'testFile.js';

// 按顺序链式加载脚本
jQuery.getScript(`testFolder/${testFileName}`)
  .then(() => jQuery.getScript('ok1.js'))
  .then(() => jQuery.getScript('ok2.js'))
  .then(() => {
    // 所有脚本加载完成后，在此处执行依赖所有资源的初始化逻辑
  })
  .catch((err) => {
    console.error('脚本加载失败：', err);
  });

异常排查点 #

如果修改后功能仍不正常，检查两个点：

• 确认testFile.js、ok1.js中的函数是否挂载到全局作用域：如果函数定义在闭包内部（比如包裹在(function(){})()自执行函数里），外部无法访问，需要改成window.getFile0 = function() {}的形式显式暴露到全局。
• 原有逻辑如果绑定了DOMContentLoaded等页面事件，动态加载时事件已经触发，需要把相关初始化逻辑直接执行，不要放在事件回调里。

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