JS定时器的一些特性和如何避免重复设置定时器的三种解决方法

最新推荐文章于 2024-04-07 10:46:03 发布

硬核哈士奇

最新推荐文章于 2024-04-07 10:46:03 发布

阅读量2.4k

点赞数 2

文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_54597170/article/details/120375394

版权

JS定时器的一些特性和如何避免重复设置定时器

概述和总结

每个JS定时器产生时会被系统分配一个id，这个id是正整数，而且一个页面里面的定时器id不重复，我们能用一个变量接收这个id，但是如果重复执行一条接收创建语句，那么你只能接收到最新创建的定时器的id，之前创建的定时器的id会被覆盖，但是定时器数量在增加，这就会导致界面一些功能错乱，解决方法就是在重复按开始按钮时，如果已经有了一个定时器那么就不执行语句，我列出了错误代码和三种解决方法，可以解决定时器重复创建问题。
ps：定时器id的配发是递增的，从1开始累加，但是有一个小细节，就是当你在一次页面运行的过程中，打个比方，你创建了第五个定时器，它的id为5，然后你把它销毁，再创建一个定时器，那么这个定时器的编号会是6，而不是5，5号id是不会因为第五个定时器器的销毁而可以被再次使用。

案例分析

用两个按钮来控制灯泡的闪烁，运用CSS简单美化页面，然后控制功能由JavaScript实现，但在使用JS中的计时器时遇到一些问题。也不再废话了，下面是最开始的代码

<!DOCTYPE html>
<!--默认en，但原则上还是改成ch比较好 -->
<html lang="ch">
<head>
<!--设置字符编码为utf-8 -->
    <meta charset="UTF-8">
    <title>电灯</title>
<!--下面是CSS部分代码 -->
    <style>
/*
border-radius:设置边框圆角
margin-top: 设置上外边距
margin-left:设置左外边距
这里边距使用百分比比直接设置px要方便适配点
*/
        #stop{
            background-color: aqua;
            border-radius: 10px;
            width: 100px;
            height: 40px;
            margin-top: 10%;
            margin-left: 20%;

        }
        #start{
            background-color: blueviolet;
            border-radius: 10px;
            width: 100px;
            height: 40px;
            margin-top: 10%;
            margin-left: 37.5%;

        }
        #light_off{
            margin-left:50%;
            margin-top: 10%;

        }
    </style>
</head>
<body>
<!--这里就是三个元素的定义 -->
    <img id="light_off" src="imge/off.gif"><br>
    <input type="button" value="START" name="start" id="start">
    <input type="button" value="STOP" name="stop" id="stop">

    <script>
/*
这里就是JS部分了
问题也就出在这里
*/
/*
这里先
*/
        let a =100;
        let light_off = document.getElementById("light_off");
        let but_start = document.getElementById("start")
        let but_stop = document.getElementById("stop")
        /*
        这里把灯泡切换状态功能封装成一个函数
        */
        function off_open(){
            if (light_off.src.endsWith("imge/off.gif")){
                light_off.src="imge/on.gif";
            }else {
                light_off.src="imge/off.gif";
            }
        }
        but_start.onclick = function (){
        /*这里有个小细节，如果使用let或者var来定义变量，那么得到的变量是局部变量，而如果不使用直接写那么得到的就是全局变量
        然后这里使用JS的循环定时器，每100ms执行一次，第一个参数是被执行函数，第二个是时间间隔
        问题也就出在这里，我每次点击START按钮，都会创建一个计时器，但是只有最新的计时器会被赋值给b，然后就导致STOP按钮只能中断最新的定时器，之前的定时器我就找不到了，但它们还在运作，就会导致点击开始次数越多，灯泡闪烁间隔越小，STOP也无法阻止，这里首先我想到的改进方法就是，在按Start时先判断一下b是否为空，如果为空，那么就执行灯泡闪烁的函数，如果不为空那么就不执行，但是我错误理解了定时器的机制，定时器给b的其实是一个整数编号，然后清除定时器之后，定时器本身编号变成null
        */
                b =setInterval(off_open,100);
        }
        but_stop.onclick = function (){
            clearInterval(b)
        }

    </script>
</body>
</html>

修改方法1

这里引入一个flag来判断再次点击start是否能生效，flag默认false，如果flag是false那么创建定时器的语句就能生效，生效之后，就会把flag变成true，而stop按钮按下之后不仅会清除唯一的定时器，同时也会把flag变成false，这样就解决了问题。

<script>
        let b;
        let a =100;
        let flag = false;
        let light_off = document.getElementById("light_off");
        let but_start = document.getElementById("start")
        let but_stop = document.getElementById("stop")
        function off_open(){
            if (light_off.src.endsWith("imge/off.gif")){
                light_off.src="imge/on.gif";
            }else {
                light_off.src="imge/off.gif";
            }
        }
        but_start.onclick = function (){
            if (flag ==false){
                b =setInterval(off_open,100);
                flag = true;
            }
        }
        but_stop.onclick = function (){            
            clearInterval(b);
            flag = false;
        }

    </script>

修改方法2

这个方法主要是在理解了js定时器编号机制之后修改出来的结果，仍然使用b作为容器，但是这次我们先给b赋值，赋值一个系统永远不会分配给定时器的编号数字那就是-100，然后在按下暂停键之后，虽然定时器本身的值已经变为null但是并未赋值给b，那我们自己再给b赋值一个不同于-100的负数-50，这样在我们再次按下start的时候，只要判断一下b是否等于-100或者-50即可，因为如果存在一个定时器，那么b里面就一定是一个正整数

<script>
        let b =-100;
        // let flag = false;
        let light_off = document.getElementById("light_off");
        let but_start = document.getElementById("start")
        let but_stop = document.getElementById("stop")
        function off_open(){
            if (light_off.src.endsWith("imge/off.gif")){
                light_off.src="imge/on.gif";
            }else {
                light_off.src="imge/off.gif";
            }
        }
        but_start.onclick = function (){
            if (b==-100||b==-50){
                b =setInterval(off_open,100);
            }
        }
        but_stop.onclick = function (){
            clearInterval(b);
            b=-50
        }

    </script>

修复方法3

这里根据定时器分配id递增的规则，通过控制b和c这两个变量的增加，通过一些设计实现如果他们相差1那么就允许创建定时器，如果已经有定时器存在，那么他们就相等。

<script>
        let b=1;
        let c=0;
        let light_off = document.getElementById("light_off");
        let but_start = document.getElementById("start")
        let but_stop = document.getElementById("stop")
        function off_open(){
            if (light_off.src.endsWith("imge/off.gif")){
                light_off.src="imge/on.gif";
            }else {
                light_off.src="imge/off.gif";
            }
        }
        but_start.onclick = function (){
            if (b==(c+1)){
                b =setInterval(off_open,100);
                c+=1;
            }
        }
        but_stop.onclick = function (){
            clearInterval(b);
            b+=1;
        }
    </script>

硬核哈士奇

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS定时器的一些特性和如何避免重复设置定时器的三种解决方法

JS定时器的一些特性和如何避免重复设置定时器概述和总结每个JS定时器产生时会被系统分配一个id，这个id是正整数，而且一个页面里面的定时器id不重复，我们能用一个变量接收这个id，但是如果重复执行一条接收创建语句，那么你只能接收到最新创建的定时器的id，之前创建的定时器的id会被覆盖，但是定时器数量在增加，这就会导致界面一些功能错乱，解决方法就是在重复按开始按钮时，如果已经有了一个定时器那么就不执行语句，我列出了错误代码和三种解决方法，可以解决定时器重复创建问题。ps：定时器id的配发是递增的，从1开
复制链接

扫一扫