JS脚本加载后执行相应回调函数

前言

在项目开发中，我们经常会遇到这样的问题：当某个js脚本加载完成后再执行相应任务，但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成，如果没有加载完成我们就调用js文件里面的函数是不会成功的。本文将详细讲解如何在成功加载js文件后再执行相应的回调任务。

方法

1. 动态创建DOM元素

我们可以动态的创建<script>元素，然后将<script>元素添加到页面中，当<script>元素加载完成后，就会触发<script>元素的onload事件，此时我们就可以执行相应的回调函数了。

<script>
  var script = document.createElement('script');
  script.src = 'path/to/script.js';
  script.onload = function() {
    // 脚本加载完成后执行的回调函数
  };
  document.head.appendChild(script);
</script>

2. 使用<script>标签的async属性

<script>标签的async属性可以指定脚本是否异步加载，如果设置为true，则脚本将异步加载，并且不会阻塞页面的渲染。当脚本加载完成后，就会触发<script>元素的onload事件，此时我们就可以执行相应的回调函数了。

<script async src="path/to/script.js"></script>

3. 使用addEventListener方法

我们可以使用addEventListener方法为<script>元素添加load事件监听器，当<script>元素加载完成后，就会触发load事件，此时我们就可以执行相应的回调函数了。

<script>
  var script = document.createElement('script');
  script.src = 'path/to/script.js';
  script.addEventListener('load', function() {
    // 脚本加载完成后执行的回调函数
  });
  document.head.appendChild(script);
</script>

4. 使用onload事件

我们可以使用onload事件来监听页面的加载状态，当页面加载完成后，就会触发onload事件，此时我们就可以执行相应的回调函数了。

<script>
  window.onload = function() {
    // 页面加载完成后执行的回调函数
  };
</script>

5. 使用DOMContentLoaded事件

我们可以使用DOMContentLoaded事件来监听DOM元素加载完成的状态，当DOM元素加载完成后，就会触发DOMContentLoaded事件，此时我们就可以执行相应的回调函数了。

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // DOM元素加载完成后执行的回调函数
  });
</script>

6. 使用readystatechange事件

我们可以使用readystatechange事件来监听<script>元素的加载状态，当<script>元素的加载状态发生变化时，就会触发readystatechange事件，此时我们可以检查<script>元素的readyState属性，如果readyState属性的值为complete，则说明<script>元素已经加载完成，此时我们就可以执行相应的回调函数了。

<script>
  var script = document.createElement('script');
  script.src = 'path/to/script.js';
  script.onreadystatechange = function() {
    if (this.readyState == 'complete') {
      // 脚本加载完成后执行的回调函数
    }
  };
  document.head.appendChild(script);
</script>

7. 使用window.onload事件

我们可以使用window.onload事件来监听页面的加载状态，当页面加载完成后，就会触发window.onload事件，此时我们就可以执行相应的回调函数了。

<script>
  window.onload = function() {
    // 页面加载完成后执行的回调函数
  };
</script>

总结

本文介绍了7种在JS脚本加载后执行相应回调函数的方法，包括动态创建DOM元素、script标签、addEventListener、onload、DOMContentLoaded、readystatechange和window.onload等方法，希望对大家有所帮助。