网页中JS函数自动执行常用三种方法

网页中JS函数自动执行是常见的需求之一，本文将详细讲解JS函数自动执行的常用三种方法。

方法一：window.onload

window.onload是一个最为常见的JS函数自动执行方法，它会在页面内容完全加载后触发，只有当页面所有资源（包括图片、CSS、JS等）都加载完成后，才会触发该事件。因此，可以通过window.onload执行JS函数的方式来保证页面元素完全加载后再执行相关JS操作。

示例代码：

window.onload = function() {
  // 页面所有资源均已加载完毕后执行的JS函数
  // 对页面元素进行操作，实现页面效果
}

在上述示例代码中，匿名函数部分即为需要执行的JS代码。当页面所有资源均已加载完成后，该匿名函数会被自动执行。

方法二：DOMContentLoaded

DOMContentLoaded是一个比window.onload执行更早的事件，它在页面DOM元素解析完成后就会被触发。当页面的HTML代码被解析之后，就可以访问DOM元素，可以通过DOMContentLoaded事件来执行JS函数。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
  // DOM元素解析完成后执行的JS函数
  // 对页面元素进行操作，实现页面效果
});

在上述示例代码中，可以通过addEventListener方法监听DOMContentLoaded事件，当DOMContentLoaded事件触发时，会自动执行相应的JS函数。

方法三：setTimout

setTimout也是JS函数自动执行的一种常用方式，它可以让JS函数在指定的时间间隔后自动执行。

示例代码：

setTimeout(function() {
  // 指定时间后自动执行的JS函数
  // 对页面元素进行操作，实现页面效果
}, 1000);

在上述示例代码中，setTimout函数会在等待1000毫秒后自动执行匿名函数当中的JS代码。可以通过改变等待时间，来调整JS函数自动执行的时间。

以上是JS函数自动执行的三种常用方式，可以灵活应用到具体的JS编程实践之中，达到相应的JS自动执行效果。