다음 스크립트를 실행하기 전에 type="module"인 스크립트가 완료될 때까지 기다리세요.

Question

내 HTML 문서 내부 body 标记的底部，我有 2 个脚本标记，其中 type="module". 아래에는 처음 두 스크립트의 결과에 따라 달라지는 일부 삽입 코드가 포함된 스크립트 태그가 있습니다.

처음 두 스크립트가 완료된 후에만 이 코드가 실행되도록 하는 방법이 있습니까?

<script src="./src/js/script1.js" type="module"></script>
<script src="./src/js/script2.js" type="module"></script>
<script type="text/javascript">
  // Code inside this tag should only run after the 2 previous script tags have been executed
  console.log('Hello SO');
</script>

Answer 1

<script> 带有 type="module" 的标签会被自动赋予 defer 属性（参见 脚本的加载和执行顺序），所以为了让第三个标签在后面运行，它也需要推迟。由于内联脚本不可能做到这一点（如注释中所述），因此您可以将脚本移动到另一个文件并使用 src 属性引用它，或者将代码包装在 DOMContentLoaded 이벤트에 대한 이벤트 리스너(https://stackoverflow.com/a/41395202/19461620 참조)

외부 스크립트 파일 사용:

으아악

script.js

으아악

DOMContentLoaded 콜백 사용:

으아악