在前端开发中，我们常常需要在页面完全加载后才能执行一些关键的操作。例如，我们可能需要确保所有资源（如图片、样式表和脚本）都已经加载完成，或者需要等待某些异步数据返回后才能进行下一步操作。本文将介绍几种方法来实现在页面完全加载后执行函数的功能。
方法一：使用window.onload事件
------------- - ---------- - -- -------------------- -
window.onload 事件是当整个页面及其所有依赖项（如样式表、图像等）都已完全加载时触发的事件。通过将要执行的函数绑定到 window.onload 事件上，可以确保它们只有在页面完全加载后才会被执行。
方法二：使用DOMContentLoaded事件
--------------------------------------------- ---------- - -- --------------------- --
与 window.onload 类似，DOMContentLoaded 事件也是在页面加载完成时触发的一个事件。不同之处在于，DOMContentLoaded 事件仅在HTML文档被完全解析和转换成DOM树后就会被触发。这意味着，在 DOMContentLoaded 发生时，尚未加载的外部资源（如图片）可能仍未被下载完全。
方法三：使用setTimeout函数
--------------------- - ---------------------- -- --
虽然 window.onload 和 DOMContentLoaded 事件可能是您想要使用的首选方法，但有时它们可能会受到一些限制。例如，当网站包含大量资源或者网络连接不佳时，可能需要较长时间才能完全加载和解析HTML文档。在这种情况下，您可能需要使用 setTimeout 函数来确保函数在页面完全加载后执行。
通过将要执行的函数绑定到 setTimeout 函数上，可以将该函数推迟到JavaScript引擎完成当前执行队列中所有任务后再执行。通过将超时设置为 0，可以确保该函数被添加到队列末尾，并且只有在其他任务已经完成时才会执行。
总结
本文介绍了三种实现在页面完全加载后执行函数的方法：
- 使用
window.onload事件 - 使用
DOMContentLoaded事件 - 使用
setTimeout函数
每种方法都有其优缺点，取决于您的具体需求和情况。选择正确的方法可以帮助您避免因脚本在错误的时间执行而导致的问题。
参考文献：
- https://developer.mozilla.org/zh-CN/docs/Web/API/Window/load_event
- https://developer.mozilla.org/zh-CN/docs/Web/API/Document/DOMContentLoaded_event
- https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9312