都知道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