在前端开发中，我们经常需要加载多个 JavaScript 文件来实现网页的各种功能。但是，当这些文件被异步加载时，有时会出现问题，因为需要等到所有文件都加载完毕后才能执行某些操作。那么，是否有一种方法可以在所有 JavaScript 文件加载完毕后再执行代码呢？答案是肯定的，本文将介绍如何实现这一目标。
加载 JavaScript 文件的方法
在 HTML 中，我们通常使用以下方式来加载 JavaScript 文件：
------- ------------------------ ------- ------------------------ ------- ------------------------
这种方式会将文件异步地加载到浏览器中，并立即开始执行其中的代码。如果这些文件之间有依赖关系，例如 file2.js 使用了 file1.js 中定义的函数，则可能会导致错误。
为了避免这种情况，我们可以使用以下两种方式来加载 JavaScript 文件：
1. defer 属性
defer 属性用于告诉浏览器，该文件将在文档解析完毕后执行，但在 DOMContentLoaded 事件触发之前执行。因此，在使用 defer 属性时，我们可以确保所有 JavaScript 文件都已加载完成，然后再执行代码。示例代码如下：
------- -------------- --------------- ------- -------------- --------------- ------- -------------- --------------- -------- -- --- ---------- ----------- ---------
2. async 属性
async 属性用于告诉浏览器，该文件将在下载完毕后立即执行。因此，在使用 async 属性时，我们不能确保所有 JavaScript 文件都已加载完成就开始执行代码。示例代码如下：
------- -------------- --------------- ------- -------------- --------------- ------- -------------- --------------- -------- -- --- ---------- ----------- ---------
等待所有 JavaScript 文件加载完成的方法
如果我们需要等待所有 JavaScript 文件加载完成后再执行代码，可以使用以下两种方式：
1. 使用 DOMContentLoaded 事件
DOMContentLoaded 事件在文档解析完毕后触发，表示所有 DOM 元素都已经被解析完成。因此，我们可以将代码放在 DOMContentLoaded 事件的回调函数中，以确保所有 JavaScript 文件都已加载完成。示例代码如下：
------- ------------------------
------- ------------------------
------- ------------------------
--------
--------------------------------------------- ---------- -
-- --- ---------- -----------
---
---------2. 使用 Promise 对象
Promise 对象是 JavaScript 中一种用于处理异步操作的机制，它可以将异步操作封装成一个对象，并提供 then 和 catch 方法来处理成功和失败的情况。我们可以利用 Promise.all 方法将所有 JavaScript 文件异步加载，然后在 Promise 对象的回调函数中执行代码。示例代码如下：
--------
-------- --------------- -
------ --- ------------------------- ------- -
--- ------ - ---------------------------------
---------- - ----
------------- - --------
-------------- - -------
----------------------------------
---
-
-------------
-----------------------
-----------------------
----------------------
------------------ -
-- --- ---------- -----------
------------------------ -
-------------------
---
---------总结
在前端开发中，我们通常需要加载多个 JavaScript 文件来实现网页的各种功能。为了避免文件之间的依赖关系导致代码错误，我们可以使用 defer 或 async 属性来加载 JavaScript 文件。如果需要确保所有文件都已加载
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26808