JS定时器的一些特性和如何避免重复设置定时器
概述和总结
每个JS定时器产生时会被系统分配一个id，这个id是正整数，而且一个页面里面的定时器id不重复，我们能用一个变量接收这个id，但是如果重复执行一条接收创建语句，那么你只能接收到最新创建的定时器的id，之前创建的定时器的id会被覆盖，但是定时器数量在增加，这就会导致界面一些功能错乱，解决方法就是在重复按开始按钮时，如果已经有了一个定时器那么就不执行语句，我列出了错误代码和三种解决方法，可以解决定时器重复创建问题。
ps：定时器id的配发是递增的，从1开始累加，但是有一个小细节，就是当你在一次页面运行的过程中，打个比方，你创建了第五个定时器，它的id为5，然后你把它销毁，再创建一个定时器，那么这个定时器的编号会是6，而不是5，5号id是不会因为第五个定时器器的销毁而可以被再次使用。
案例分析
用两个按钮来控制灯泡的闪烁，运用CSS简单美化页面，然后控制功能由JavaScript实现，但在使用JS中的计时器时遇到一些问题。也不再废话了， 下面是最开始的代码
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>电灯</title>
<style>
#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>
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 (){
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 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>
|