javascript函数自动执行常用方法汇总

2023年5月27日上午11:49 • JavaScript

本文将详细讲解JavaScript函数自动执行的几种常用方法。

1. 什么是函数自动执行？

函数自动执行指的是在页面加载时或者在某个特定的事件触发时，函数自动被执行。这种自动执行的函数我们称之为“自执行函数”。

自执行函数的定义形式有两种：

// 匿名函数方式
(function(){
    // code here
})();

// 具名函数方式
(function mySelfInvokeFunction(){
    // code here
})();

上述两种方式构建的函数，在定义时就会自动执行，并且不会在调用时被重新执行。

2. 函数自动执行的常用方法

2.1 window.onload()

使用window.onload()方法，可以确保我们的JavaScript代码在所有资源都加载完成之后再执行，这样可以避免在JavaScript代码没有全部加载完之前就执行的问题。例如：

<script>
    window.onload = function(){
        //执行代码
    }
</script>

2.2 $(document).ready()

在使用 jQuery 的情况下，我们可以使用$(document).ready()方法，这个方法会在DOM树加载完成之后执行，但是不必等待所有资源都加载完成。例如：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function(){
        //执行代码
    })
</script>

2.3 setTimeout()

使用setTimeout()方法可以延迟JavaScript代码的执行，这个方法会在指定的时间之后执行，指定的时间可以是毫秒数。例如：

<script>
    setTimeout(function(){
        //执行代码
    },1000) //1秒之后执行
</script>

3. 示例说明

3.1 window.onload() 示例

下面的示例展示了当页面所有资源都加载完成后，alert弹窗会自动弹出。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title>示例1：window.onload()</title>  
</head>  
<body>  
    <script>  
        window.onload = function() {  
            alert("window.onload域已加载完毕！");  
        }  
    </script>  
    <p>我会在弹出窗口后出现！</p>  
</body>  
</html>

3.2 $(document).ready() 示例

下面的示例展示了当DOM树加载完成后执行的代码。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title>示例2：$(document).ready()</title>  
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
    <script>  
        $(document).ready(function() {  
            alert("DOM树加载完毕！");  
        });  
    </script>  
</head>  
<body>  
    <p>我会在弹出窗口前出现！</p>  
</body>  
</html>

以上是关于JavaScript函数自动执行的常用方法的介绍及示例说明，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript函数自动执行常用方法汇总 - Python技术站