window对象——定时器简介

周白卿

已于 2022-07-23 16:39:50 修改

阅读量819

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript 前端开发语言

于 2022-07-23 12:02:00 首次发布

本文链接：https://blog.csdn.net/qq_51088023/article/details/125945759

版权

JavaScript学习笔记专栏收录该内容

60 篇文章 1 订阅

订阅专栏

JavaScript的程序执行速度时非常快的，如果希望一段程序每隔一段时间执行一次，可以使用定时调用。

setInterval()

定时调用，设置一个定时器，可以将一个函数每隔一段时间被调用一次
调用该方法会返回一个Number类型的数据，这个数字作为定时器的唯一标识（timeID）
参数：

回调函数，该函数每隔一段时间被调用一次
每次调用间隔的时间，单位是毫秒

语法：setInterval(回调函数，时间间隔);

var num = 1;
var timeID = setInterval(function(){
    alert(num++);
},1000);

clearInterval()

该方法可以用来关闭定时器
方法中需要一个定时器的标识作为参数（timeID），关闭对应的定时器

语法：clearInterval(timeID);

clearInterval(timeID);

setTimeout()

延时调用，延时调用一个函数，不会马上执行，而是隔一段时间后再执行，用法和setInterval()类似
延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
延时调用和定时调用实际上是可以互相代替的，在开发中可以根据需要去选择

语法：setTimeout(回调函数，时间间隔);

var num = 1;
var timeID = setTimeout(function(){
    alert(num++);
},1000);

clearTimeout()

该方法可以用来关闭延时器
方法中需要一个延时器的标识作为参数（timeID），关闭对应的延时器

语法：clearTimeout(timeID);

clearTimeout(timeID);

切换图片练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0%;
            padding: 0%;
        }
    </style>
    <script>
        window.onload = function () {
            /**
             * 使图片可以自动切换
            */
            //获取img
            var img1 = document.getElementById("img1");
            //创建一个数组保存图片路径
            var imgArr = ["/火影方块/1.webp", "/火影方块/2.webp", "/火影方块/3.webp", "/火影方块/4.webp", "/火影方块/5.webp"];
            //创建一个变量来保存当前正在显示的图片的索引
            var index = 0;
            //定义一个变量用来保存定时器的标识
            var timeID;
            //获取btn01
            var btn01 = document.getElementById("btn01");
            //为btn01绑定一个开始单击函数
            btn01.onclick = function () {
                /*
                 * 每点击一次按钮就会开启一个定时器
                 * 点击多次就会开启多个定时器，这就导致图片的切换速度过快
                 * 并且只能关闭最后一次开启的定时器
                 */
                //在开启下一个定时器之前，将当前元素上的其他定时器关闭
                clearInterval(timeID);
                /*
                 *开启一个定时器来自动切换图片
                 */
                timeID = setInterval(function () {
                    //使索引自增
                    index++;
                    // //判断索引是否超过最大索引，方法一
                    // if(index>=imgArr.length)
                    // {   //则将index设置为0
                    //     index = 0;
                    // }
                    //判断索引是否超过最大索引，方法二
                    index %= imgArr.length
                    //修改图片路径
                    img1.src = imgArr[index];
                }, 1000);
            };
            //获取btn02
            var btn02 = document.getElementById("btn02");
            //为btn02绑定一个结束单击函数
            btn02.onclick = function(){
                //点击按钮后结束自动切换，关闭定时器
                /**
                 * clearInterval()可以接收任意参数
                 * 如果参数是一个有效的定时器标识，则停止对应的定时器
                 * 如果参数不是一个有效的标识，则什么也不做
                */
                clearInterval(timeID);
            };
        };
    </script>
</head>

<body>
    <img id="img1" src="/火影方块/1.webp" width="600px" height="500px">
    <br>
    <button id="btn01">开始</button>
    <button id="btn02">结束</button>
</body>

</html>