JS 等待文档准备好 - Javascript

在编写 JavaScript 代码时，有时候需要确保页面的 DOM (文档对象模型) 已经完全加载和准备好以便操作。本文将介绍一些常见的方法和技巧来实现该目的。

1. 使用 DOMContentLoaded 事件

DOMContentLoaded 事件在整个 HTML 文档被解析和完全加载后触发。我们可以通过给 document 对象添加该事件的监听器来执行需要在文档准备好后执行的代码。

document.addEventListener('DOMContentLoaded', function() {
  // 在这里添加需要执行的代码
});

该方法的好处是它只会等待 DOM 的加载，而不会等待其他资源（如图片或脚本文件）的加载。

2. 使用 window.onload 事件

window.onload 事件会在整个页面包括 DOM、样式表、脚本和图片等所有资源都完全加载后触发。我们可以像上面一样给 window 对象添加该事件的监听器来执行代码。

window.onload = function() {
  // 在这里添加需要执行的代码
};

与DOMContentLoaded不同，window.onload事件会等待整个页面加载完成，包括所有外部资源的加载。因此，如果代码依赖于外部资源，请使用此方法。

3. 使用 setTimeout 函数

如果你不想等待特定的事件，或者需要在特定的时间后执行代码，可以使用 setTimeout 函数来设置一个定时器。

setTimeout(function() {
  // 在这里添加需要在一段时间后执行的代码
}, 1000); // 等待1秒钟

此方法不会等待任何事件或资源加载，而是在指定的时间过后执行代码。

4. 使用 async 或 defer 属性

在 <script> 标签中，可以使用 async 或 defer 属性来控制脚本的执行时机。

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

<script src="script.js" defer></script>

async 属性表示脚本将在下载完成后立即执行，而不会等待其他脚本或资源。defer 属性则表示脚本将在整个文档解析完成后执行。

注意：使用这两个属性需要谨慎，因为它们可能导致脚本的执行顺序发生变化。

以上是几种常见的方法来等待文档准备好的示例。根据你的具体需求，选择适合的方法进行实现。

参考资料：

• MDN Web 文档：DOMContentLoaded 事件
• MDN Web 文档：window.onload 事件
• MDN Web 文档：setTimeout()
• MDN Web 文档：script 元素的 async 和 defer 属性