JS设置定时器_js设置定时器
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>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/226732.html原文链接：https://javaforall.cn
腾讯云开发者
