HTML 加载 JS 文件时如何确保加载完成再调用方法？

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《HTML 加载 JS 文件时如何确保加载完成再调用方法？ 》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

HTML 加载 JS 文件时能否确保加载完成再调用方法

在 HTML 文档中，加载外部 JS 文件有顺序执行和异步执行两种方式。

顺序执行

普通 <script> 标签会阻塞渲染，即在 HTML 解析器解析这个标签之前会等待 JS 文件加载并执行。因此，在顺序执行模式下，题目中给出的代码会按照以下顺序执行：

1. 加载 js_all.js 文件
2. 运行 js_all.js 中的内容
3. 调用 getMetaInfo() 方法

异步执行

为了避免阻塞渲染，可以将 async 或 defer 属性添加到 <script> 标签中。使用 async 属性，将在解析 HTML 时加载 JS 文件，但不会阻塞渲染。使用 defer 属性，将在解析 HTML 后加载 JS 文件，同样不会阻塞渲染。

在异步执行模式下，JS 文件加载完成后，浏览器将在主线程执行结束时运行 getMetaInfo() 方法。因此，无法保证 getMetaInfo() 方法一定在 JS 文件加载完成后执行，也可能出现 JS 文件尚未完全加载的情况。

如何确定加载完成后执行方法

为了解决这个问题，可以使用回调函数或 Promise 对象。

使用回调函数

<script type="text/javascript" src="js_all.js">
  (function(callback) {
    if (window.getMetaInfo) {
      callback();
    } else {
      window.onload = callback;
    }
  })(function() {
    // JS 文件加载完成，执行方法
  });
</script>

使用 Promise 对象

<script type="text/javascript" src="js_all.js">
  const script = document.createElement('script');
  script.onload = function() {
    // JS 文件加载完成，执行方法
  };
  document.head.appendChild(script);
</script>

通过以上方法，可以在 JS 文件加载完成后再执行特定方法。

以上就是《HTML 加载 JS 文件时如何确保加载完成再调用方法？ 》的详细内容，更多关于的资料请关注golang学习网公众号！