怎么判断js脚本加载是否完成

判断JS脚本加载是否完成的方法有：使用事件侦听器、检查特定变量、使用加载回调、采用Promise对象。最常用的方法是使用事件侦听器。在现代浏览器中，可以通过监听脚本元素的load和error事件来判断脚本是否成功加载。这样不仅可以确保脚本加载完成，还可以处理加载失败的情况。

一、事件侦听器

使用事件侦听器是判断JavaScript脚本加载是否完成的最直接和可靠的方法。通过监听script元素的load事件，可以精确地确定脚本何时加载完成。

在HTML文档中，JavaScript脚本通常通过<script>标签进行加载。为了确保脚本在加载完成后执行某些操作，可以在插入<script>标签时添加一个事件侦听器：

<script>
  var script = document.createElement('script');
  script.src = 'path/to/your/script.js';
  script.onload = function() {
    console.log('Script loaded successfully.');
    // 执行你的回调函数或后续逻辑
  };
  script.onerror = function() {
    console.error('Failed to load script.');
  };
  document.head.appendChild(script);
</script>

在这个例子中，我们动态创建了一个<script>元素，并为其添加了onload和onerror事件侦听器。当脚本成功加载时，onload事件会触发；如果加载失败，onerror事件会触发。

二、检查特定变量

另一种方法是检查特定的全局变量或对象是否存在。这种方法适用于你知道脚本会定义某些变量或函数的情况。

var checkScriptLoaded = setInterval(function() {
  if (typeof someFunctionOrVariable !== 'undefined') {
    console.log('Script loaded.');
    clearInterval(checkScriptLoaded);
    // 执行你的回调函数或后续逻辑
  }
}, 100);

在这个例子中，我们使用setInterval函数每隔100毫秒检查一次某个变量或函数是否存在。一旦检测到变量或函数存在，就可以确定脚本已经加载完成。

三、使用加载回调

一些第三方库和插件允许在加载完成后执行回调函数。例如，jQuery的getScript方法可以在脚本加载完成后执行一个回调函数：

$.getScript('path/to/your/script.js', function() {
  console.log('Script loaded successfully.');
  // 执行你的回调函数或后续逻辑
});

这种方法非常简洁，并且可以处理异步脚本加载的情况。

四、采用Promise对象

现代JavaScript提供了Promise对象，使得处理异步操作更加方便。在脚本加载的场景中，我们可以封装一个返回Promise对象的函数：

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Script load error for ${url}`));
    document.head.appendChild(script);
  });
}
loadScript('path/to/your/script.js')
  .then(script => {
    console.log('Script loaded successfully.');
    // 执行你的回调函数或后续逻辑
  })
  .catch(error => {
    console.error(error);
  });

这种方法利用了Promise的异步特性，使得代码更加简洁和可读。

五、使用模块化加载器

在现代前端开发中，模块化加载器如Webpack、RequireJS等已经变得非常流行。这些工具可以帮助你管理和加载JavaScript模块，确保脚本按需加载并且依赖关系得到正确处理。

Webpack

Webpack是一个现代JavaScript应用程序的模块打包工具。通过使用Webpack，你可以将项目中的所有JavaScript文件（以及其他资源）打包成一个或多个bundle。Webpack会自动处理模块之间的依赖关系，并确保脚本按正确的顺序加载。

在Webpack中，可以使用import和require语句来加载模块：

import myModule from './path/to/myModule';
myModule.someFunction();

Webpack会确保myModule在使用之前已经加载完成。

RequireJS

RequireJS是一个JavaScript文件和模块加载器。它可以帮助你管理依赖关系，并确保脚本按需加载。使用RequireJS，你可以定义模块，并通过require函数加载它们：

require(['path/to/myModule'], function(myModule) {
  myModule.someFunction();
});

这种方法可以确保myModule在使用之前已经加载完成。

六、结合使用事件侦听器和Promise

在某些情况下，你可能需要结合使用事件侦听器和Promise来处理更复杂的加载场景。例如，当你需要加载多个脚本并确保它们按顺序加载时，可以采用这种方法：

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Script load error for ${url}`));
    document.head.appendChild(script);
  });
}
loadScript('path/to/first/script.js')
  .then(() => loadScript('path/to/second/script.js'))
  .then(() => {
    console.log('All scripts loaded successfully.');
    // 执行你的回调函数或后续逻辑
  })
  .catch(error => {
    console.error(error);
  });

在这个例子中，第二个脚本会在第一个脚本加载完成后才会加载，从而确保了脚本的加载顺序。

七、使用异步和延迟加载

为了提高页面加载性能，可以使用异步和延迟加载技术。在HTML中，可以通过设置async和defer属性来实现：

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

async属性表示脚本会异步加载，不会阻塞页面的解析。然而，脚本的执行顺序无法保证。

<script src="path/to/your/script.js" defer></script>

defer属性表示脚本会延迟到页面完全解析完成后再执行，并且会按顺序执行。

八、项目管理工具的应用

在大型项目中，管理和加载JavaScript脚本可能会变得复杂。使用专业的项目管理工具可以帮助你更好地管理依赖关系和加载顺序。推荐使用以下两个系统：

研发项目管理系统PingCode

PingCode是一款专为研发团队设计的项目管理系统。它提供了丰富的功能，包括任务管理、进度追踪、代码管理等。通过使用PingCode，你可以更好地管理项目中的JavaScript依赖关系，确保脚本按正确的顺序加载。

通用项目协作软件Worktile

Worktile是一款功能强大的项目协作软件，适用于各种类型的团队。它提供了任务管理、团队协作、文件共享等功能。通过使用Worktile，你可以更好地协调团队成员，确保项目中的JavaScript脚本按需加载。

总结

判断JavaScript脚本加载是否完成的方法有很多，包括使用事件侦听器、检查特定变量、使用加载回调、采用Promise对象等。在实际开发中，可以根据具体情况选择合适的方法。此外，使用模块化加载器、异步和延迟加载技术，以及专业的项目管理工具，可以进一步提升脚本加载的效率和可靠性。