本文介绍一种基于 Promise 链与 async/await 的现代方案，确保多个外部 JS 文件严格按声明顺序加载、解析并执行完毕（含其内部同步/异步逻辑），并在全部就绪后精准触发 allJsLoaded() 回调，避免依赖 onload 事件或全局 window.load 的不确定性。
本文介绍一种基于 promise 链与 async/await 的现代方案，确保多个外部 js 文件严格按声明顺序加载、解析并执行完毕（含其内部同步/异步逻辑），并在全部就绪后精准触发 `alljsloaded()` 回调，避免依赖 `onload` 事件或全局 `window.load` 的不确定性。
在动态懒加载多个 JS 文件时，仅监听最后一个 <script> 标签的 onload 事件并不安全——因为 onload 仅表示脚本文件已下载并完成顶层同步代码执行，无法保证其内部异步操作（如 fetch、setTimeout、模块初始化 Promise）也已完成。此外，<script> 动态插入默认具有 async=true 行为（现代浏览器），导致执行顺序不可控；而 defer 对跨域脚本无效，且 window.load 或 DOMContentLoaded 事件又过于宽泛（可能早于或晚于目标脚本的实际就绪时机）。
✅ 推荐采用 Promise 化串行加载 + 显式就绪校验 方案，兼顾可靠性、可读性与可扩展性：
✅ 正确做法：用 loadScript() 构建可等待的 Promise 链
function loadScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.type = 'text/javascript';
script.async = false; // 关键：禁用 async，确保按序执行（注意：不阻塞 HTML 解析，因是动态插入）
script.onload = () => {
// 可选增强：验证脚本是否真正“就绪”（如检查导出的全局变量或初始化标志）
if (typeof window.MyModule !== 'undefined' && window.MyModule.isInitialized === true) {
resolve();
} else {
// 若脚本内含异步初始化，需主动等待其完成信号
const checkReady = () => {
if (window.MyModule?.isInitialized) resolve();
else setTimeout(checkReady, 10);
};
checkReady();
}
};
script.onerror = () => reject(new Error(`Failed to load ${src}`));
document.head.appendChild(script);
});
}
// 按序加载并确保全部完成后再执行回调
async function loadAllScripts() {
try {
await loadScript('file1.js');
await loadScript('file2.js');
await loadScript('file3.js');
allJsLoaded(); // ✅ 此时所有脚本及其内部逻辑均确定就绪
} catch (err) {
console.error('Script loading failed:', err);
}
}
// 启动加载
loadAllScripts();⚠️ 注意事项与最佳实践
- 不要依赖 onload 即代表“可用”：onload 触发 ≠ 脚本功能就绪。务必在 onload 回调中补充校验逻辑（如检测全局对象属性、Promise 状态、或约定的 __ready 标志）。
- 避免 defer 在动态脚本中的误用：script.defer = true 仅对同域脚本生效，且行为受文档解析阶段影响；async = false 更可控，且动态插入不会阻塞主文档解析。
- 禁止混用 onload="allJsLoaded()" 内联语法：它无法捕获错误、难以调试，且与 Promise 链逻辑冲突；统一收口至 await 后调用更健壮。
-
扩展性设计：若脚本数量较多（如 20+），可封装为数组映射：
const scripts = ['file1.js', 'file2.js', 'file3.js']; Promise.all(scripts.map(loadScript)) .then(() => allJsLoaded()) .catch(console.error);
⚠️ 注意：Promise.all() 是并行加载（非串行），仅适用于无依赖关系的脚本；有明确依赖链时必须使用 await 串行调用。
Alibabacloud Sdk Client Initialization For Java下载在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
✅ 总结
真正可靠的“全部 JS 加载完成”判定，不在于资源下载结束，而在于执行上下文就绪 + 业务逻辑就绪。通过 Promise 封装动态加载、显式校验就绪状态、并借助 async/await 控制执行流，既能精准触发 allJsLoaded()，又具备良好的错误处理、调试支持与未来扩展能力——这是现代前端工程中推荐的标准实践。
立即学习“Java免费学习笔记（深入）”；
