如何让普通脚本等待type="module"脚本执行完成后再运行？

这里有几种可靠的方法可以确保你的内嵌代码仅在两个模块脚本执行完成后运行：

方法1：将内嵌脚本改为模块类型 #

模块脚本会按照文档中的顺序串行执行，后面的模块会等待前面的所有模块执行完成后才运行。只需把你的内嵌脚本的type改成module即可：

<script src="./src/js/script1.js" type="module"></script>
<script src="./src/js/script2.js" type="module"></script>
<script type="module">
  // 这段代码会在前面两个模块完全执行后运行
  console.log('Hello SO');
</script>

这种方法最简单，无需额外逻辑，适合不需要从模块中导入具体内容的场景。

方法2：监听模块脚本的load事件 #

给两个模块脚本添加ID，然后通过监听它们的load事件来计数，等两个模块都加载执行完成后再运行目标代码：

<script src="./src/js/script1.js" type="module" id="module1"></script>
<script src="./src/js/script2.js" type="module" id="module2"></script>
<script type="text/javascript">
  let completedModules = 0;
  const totalModules = 2;

  function runAfterModules() {
    if (++completedModules === totalModules) {
      // 两个模块都执行完毕，运行代码
      console.log('Hello SO');
    }
  }

  document.getElementById('module1').addEventListener('load', runAfterModules);
  document.getElementById('module2').addEventListener('load', runAfterModules);
</script>

模块脚本的load事件会在脚本加载并执行完成后触发，所以这个方法能准确判断模块是否执行完毕。

方法3：在模块脚本中导入依赖（如果需要使用模块内容） #

如果你的内嵌代码需要用到前两个模块导出的变量或函数，可以直接在模块类型的内嵌脚本中导入它们，这样JavaScript会自动等待依赖模块加载执行完成：

假设script1.js和script2.js有导出内容：

// script1.js
export const data1 = 'some data';

// script2.js
export const data2 = 'other data';

然后内嵌脚本这样写：

<script src="./src/js/script1.js" type="module"></script>
<script src="./src/js/script2.js" type="module"></script>
<script type="module">
  import { data1 } from './src/js/script1.js';
  import { data2 } from './src/js/script2.js';

  // 此时两个模块已执行完成，可以安全使用导出的内容
  console.log('Hello SO', data1, data2);
</script>

即使你不需要使用导出内容，只是想等待模块执行，也可以用空导入：import './src/js/script1.js';，同样能达到等待的效果。

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