在前端开发中，我们常常需要在页面加载完成后执行一些 JavaScript 函数。这可以通过将脚本放在 HTML 中的 script 标记中实现。但是，如果您想在页面中异步加载脚本并在加载完成后调用 JavaScript 函数呢？
方式一：使用 onload 事件
最简单的方式是使用 onload 事件。当脚本加载完成后，浏览器会触发该事件。以下是一个示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------------------- ------- ------ ---------- ----------- ------- ---------------- ---------------------------- ------- -------
在上面的示例中，example() 函数会在 example.js 加载完成后被调用。
方式二：使用 Promise
现代浏览器支持 Promise 对象来管理异步操作。您可以创建一个 Promise 对象，然后在脚本加载完成后解决该对象，并调用相关函数。以下是一个示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
-------
------
---------- -----------
--------
-------- --------------- -
------ --- ----------------- ------- -- -
----- ------ - ---------------------------------
---------- - ----
------------- - --------
-------------- - -------
----------------------------------
---
-
----- -------- --------- -
----- -------------------------
-----------------------
-
----------
---------
-------
-------在上面的示例中，loadScript() 函数返回一个 Promise 对象，该对象会在脚本加载完成后被解决。example() 函数使用 async/await 语法来等待脚本加载完成，然后输出“Loaded!”。
方式三：使用回调函数
您可以将要执行的函数作为回调函数传递给异步加载函数。以下是一个示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
-------
------
---------- -----------
--------
-------- --------------- --------- -
----- ------ - ---------------------------------
---------- - ----
------------- - ---------
----------------------------------
-
-------- --------- -
-----------------------
-
------------------------ ---------
---------
-------
-------在上面的示例中，loadScript() 函数接受两个参数：要加载的脚本的 URL 和要在加载完成后调用的回调函数。example() 函数作为回调函数传递给 loadScript() 函数。
总结
以上是三种异步加载脚本并在加载完成后调用 JavaScript 函数的方法。您可以根据项目需求和浏览器兼容性选择其中一种。无论您选择哪种方法，都可以通过异步加载脚本来提高页面性能和用户体验。
示例代码：https://codepen.io/ChatGPT/pen/QWvZPbK
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24182