JavaScript（17）

原创

Qwe7

发布于 2022-04-08 11:15:22

1890

发布于 2022-04-08 11:15:22

文章被收录于专栏：网络收集

五、定时器

什么叫定时器？我们可以看到绿叶学习网首页有一个“图片轮播”特效，每隔2s图片变换一次，这里就用到了定时器。啊，定时器，太重要了！天塌下来，大家都要扛着把它学会先。

定时器用途非常广，在图片轮播、在线时钟、弹窗广告等地方大显身手。凡是自动执行的东西，很大可能都是跟定时器有关。

在JavaScript中，关于定时器的实现，我们有2组方法：

（1）setTimeout()和clearTimeout()；

（2）setInterval()和clearInterval()；

这一节的例子使用“在线测试”不会有效果，请大家自行把代码复制到本地编辑器进行测试预览。下面我们详细分析这2组方法的用法与不同。

1、setTimeout()和clearTimeout()

在JavaScript中，我们可以使用setTimeout()方法来设置“一次性”调用的函数。其中clearTimeout()可以用来取消执行setTimeout()方法。

语法：

var 变量名 = setTimeout(code , time);

说明：

参数code可以是一段代码，也可以是一个调用的函数名；

参数time表示时间，表示要过多长时间才执行code中的内容，单位为毫秒。

举例：参数code是一段代码


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            setTimeout("alert('欢迎来到绿叶学习网');", 2000);

        }

    </script>

</head>

<body>

    <p>2秒后提示欢迎语。</p>

</body>

</html>

在浏览器预览效果如下：

分析：

打开页面2秒后，浏览器会弹出欢迎语。由于setTimeout()方法只会执行一次，所以只会弹出一次对话框。弹出对话框如下图：

举例2：参数code是一个函数名

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            setTimeout("welcome()", 2000);

        }

        function welcome() {

            alert("欢迎来到绿叶学习网");

        }

    </script>

</head>

<body>

    <p>2秒后提示欢迎语。</p>

</body>

</html>

在浏览器预览效果如下：