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

发布日期： 2024-11-03 阅读量： 作者： 网络

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

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

顺序执行

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

加载 js_all.js 文件
运行 js_all.js 中的内容
调用 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>

# ai

上一篇: C++ 函数传引用和传指针的区别、优缺点及注意事项

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

随便看看