本文介绍一种基于 async/await + 动态 创建的现代方案，确保多个外部 JavaScript 文件按声明顺序逐个加载、执行完毕（含内部异步逻辑）后，再启动下一个，并在全部完成后精准触发 allJsLoaded() 回调。
本文介绍一种基于 `async/await` + 动态 `<script>` 创建的现代方案，确保多个外部 javascript 文件按声明顺序逐个加载、执行完毕（含内部异步逻辑）后，再启动下一个，并在全部完成后精准触发 `all<a style="color:#f60; text-decoration:underline;" title= "js"href="https://m.php.cn/zt/15802.html" target="_blank">jsloaded()` 回调。</script>
在前端工程中，仅靠 <script defer> 或为最后一个脚本绑定 onload="allJsLoaded()" 并不能真正满足“<strong>前一个脚本完全执行完毕（包括其内部 Promise、setTimeout、fetch 等异步任务）→ 后一个才开始加载”这一强时序要求。原因如下：</script>
- onload 事件仅表示脚本已下载并同步执行完顶层代码，不等待其内部异步逻辑（如 init().then(...)）；
- defer 保证 DOM 解析完成后的执行顺序，但不阻塞后续脚本加载，也无法感知脚本内异步任务是否终结；
- 直接监听 window.load 或 DOMContentLoaded 属于全局事件，无法区分目标脚本是否就绪，且可能被其他资源（如图片、样式表）延迟触发，可靠性低。
✅ 正确解法：使用 async/await 驱动串行加载流程，每个脚本封装为返回 Promise 的函数，通过 onload 触发 resolve，并在脚本内主动 resolve() 异步任务终点（如导出 ready Promise）。
✅ 推荐实现（现代、健壮、可扩展）
// 工具函数：动态加载单个脚本并返回 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，保障执行顺序
script.onload = () => {
// 若脚本导出 ready Promise（推荐做法），则等待其完成
if (typeof window.__SCRIPT_READY !== 'undefined' && window.__SCRIPT_READY instanceof Promise) {
window.__SCRIPT_READY.then(resolve).catch(reject);
} else {
resolve(); // 无异步依赖时立即 resolve
}
};
script.onerror = () => reject(new Error(`Failed to load ${src}`));
document.head.appendChild(script);
});
}
// 按序加载全部脚本，并在全部完成时调用 allJsLoaded()
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);
// 可选：错误降级处理，如加载备用 CDN 或提示用户
}
}
// 启动加载
loadAllScripts();
? 脚本端配合建议（提升可靠性）
为确保 loadScript() 能真正等待脚本“彻底完成”，建议在每个外部 JS 文件末尾显式暴露就绪信号：
// file1.js
console.log('file1 loaded and initializing...');
initModuleA().then(() => {
// 初始化完成 → 标记就绪
window.__SCRIPT_READY = Promise.resolve();
});
// file2.js（依赖 file1）
if (typeof ModuleA === 'undefined') {
throw new Error('ModuleA not available — file1 must load first');
}
initModuleB().then(() => {
window.__SCRIPT_READY = Promise.resolve();
});
⚠️ 注意事项与最佳实践
- 不要混用 async 和 defer：async 会忽略 defer，破坏顺序；
- 避免 onload 内联函数：如 onload="allJsLoaded()" 不利于调试、测试和错误捕获，且无法传递上下文；
- 慎用 document.addEventListener('load')：该事件需等待所有资源（含图片、iframe） 加载完成，远晚于 JS 执行需求；
- DOMContentLoaded 也不适用：它仅表示 HTML 解析完成，不反映动态插入脚本的状态；
- 模块化替代方案：若项目支持 ES Modules，优先使用 await import('./file1.js') —— 它天然支持依赖链与异步等待，且由浏览器原生保障执行语义。
✅ 总结
真正的“顺序加载并等待完成”，本质是控制流编排问题，而非单纯事件监听。async/await + 动态 <script> + 显式就绪信号（__SCRIPT_READY）构成当前最简洁、可维护、可调试的解决方案。它既规避了回调地狱，又超越了 defer 的语义局限，适用于 SDK 分阶段初始化、微前端子应用加载、或任何对执行时序有强约束的场景。</script>
