首页 > 其他分享> > 关于js中clearInterval()无法在if语句中停止定时器的解决办法

关于js中clearInterval()无法在if语句中停止定时器的解决办法

2021-06-20 20:32:05 作者：互联网

都知道setInterval()需要使用clearInterval()来停止，但也有无法停下来的时候。

这是一个随机点名的生成器，但是只能开始无法停止。

上一段错误代码

		<script>
			var nameList=new Array("张三", "李四", "王五", "小淘气", "张无忌", "段誉", "乔峰");
		function random(){
			var msg=document.getElementById("rollcall");
			var random=parseInt(Math.random()*7);
			msg.innerHTML=nameList[random];
		}
		function timer(){	
			var b=document.getElementById("button");
			if(b.innerHTML=="开始"){
			var flag=window.setInterval("random()",100);
			b.innerHTML="停止";
			return ;
			}else if(b.innerHTML=="停止"){
			window.clearInterval(flag);
			b.innerHTML="开始";
			return i=0;
			}
		}
		</script>

<body>
	<div ><p id="rollcall">随机点名器</p></div>
			<div > <center><button id="button" style="background-color: red; " onclick="timer()" >开始</button></center></div>
</body>

使用clearInterval()无法停下来，会一直随机下去。

想要解决这个问题，首先我们应该设置一个全局变量 var flag=null；

var flag=null;
function timer(){	
			var b=document.getElementById("button");
			if(b.innerHTML=="开始"){
			flag=window.setInterval("random()",100);
			b.innerHTML="停止";
			return ;
			}else if(b.innerHTML=="停止"){
			window.clearInterval(flag);
			b.innerHTML="开始";
			return ;
			}
			
		}

或者不实用全局变量使用将flag设置为window对象

function timer(){	
			var b=document.getElementById("button");
			if(b.innerHTML=="开始"){
			window.flag=window.setInterval("random()",100);
			b.innerHTML="停止";
			return ;
			}else if(b.innerHTML=="停止"){
			window.clearInterval(flag);
			b.innerHTML="开始";
			return ;
			}
			
		}

这样也是可以的。

之所以会出现这样是因为flag为局部变量不能作为参数传递。应该使用全局变量或者window对象来传递。

参考https://blog.csdn.net/yulongxue/article/details/94742011

标签：定时器,random,window,innerHTML,clearInterval,flag,var,js
来源： https://blog.csdn.net/duan_yuer/article/details/117968708