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 =setIntervaloff_open,100); } but_stop.onclick = function ){ 
 clearIntervalb) } </script>
</body>
</html>

Jetbrains全家桶1年46,售后保障稳定

修改方法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 =setIntervaloff_open,100);
flag = true;
}
}
but_stop.onclick = function ){ 
            
clearIntervalb);
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 =setIntervaloff_open,100);
}
}
but_stop.onclick = function ){ 

clearIntervalb);
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 =setIntervaloff_open,100);
c+=1;
}
}
but_stop.onclick = function ){ 

clearIntervalb);
b+=1;
}
</script>

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注