定时器/延时器简介（window对象的方法）

最新推荐文章于 2022-10-09 18:28:16 发布

407指导员

最新推荐文章于 2022-10-09 18:28:16 发布

阅读量802

点赞数 2

分类专栏： # BOM 文章标签： javascript

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109774249

版权

BOM 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

定时器简介（window对象的方法）

setInterval() 方法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval(code,millisec[,"lang"])

参数	描述
code	必需。要调用的函数或要执行的代码串。
millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

clearInterval() 方法

定义和用法

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器简介</title>
    <script>
        window.onload = function () {
            //获取id
            var te = document.getElementById("te");
            //te内容自动切换
            /**
             * 如果希望一段程序，可以每隔一段时间执行一次，可以使用定时调用
             * setInterval() 方法
             *      -定时调用，可以将一个函数每隔一段执行一次
             *      -参数
             *          1.回调函数，该函数会每隔一段时间被调用一次
             *          2.每次调用间隔的时间
             *      -返回值
             *         返回一个Number类型的数据
             *         这个数字作为定时器唯一标识
             */
            var num = 1;
            var timer = setInterval(function ( ) {
                te.innerHTML = num++;
                if (num === 5) {
                    /**
                     *  clearInterval(timer);
                     *        可以用来关闭一个定时器
                     *        参数
                     *              -一个定时器的标识作为参数，这样关闭标识对应的定时器
                     */
                    clearInterval(timer);
                }
            }, 1000);
            
        };
    </script>


</head>
<body>
<h1 id="te">1</h1>
</body>
</html>

延时器（setTimeout方法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延时调用</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script>
        window.onload = function () {
            /**
             * setTimeout
             *      -延时调用一个函数不立刻执行，而是隔一段时间以后执行
             *      延时调用和定时调用的区别，定时调用会执行多次，而延时调用只有一次
             *      延时调用和定时调用其实是可以相互代替的
             *
             */
            var box1 = document.getElementById("box1");
            var timer = setTimeout(function () {
                //用来模拟定时关闭广告
                box1.style.display = "none";
            }, 5000);
            //同样使用clearTimeout来关闭一个延时调用
           //clearTimeout(timer);

        };

    </script>
</head>
<body>
<div id="box1"></div>
</body>
</html>