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

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

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

顺序执行

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

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

异步执行

立即学习“”；

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

在异步执行模式下，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 文件时如何确保加载完成再调用方法？的详细内容，更多请关注GTHOST其它相关文章！