javascript中定时器的开启和清除
-
界面
-
按钮的点击事件
<body>
<button id="bid" class="b1" onclick="random()">开始</button>
</body>
- 点击事件的函数
function random(){
var did2 = document.getElementById("did2"); //名字选取框
var bid = document.getElementById("bid"); //按钮
var mytime = null;
if(bid.getAttribute("class")=="b1"){ //按键为开始
bid.style.backgroundColor = "red";
bid.setAttribute("class","b2");
bid.innerHTML = "停止";
var i = 0;
mytime = setInterval(function(){ //通过定时器每20ms更改名字选取框内容
did2.innerHTML = list[i]; //list为名单信息,用来替换名字选取框内容
i++;
if(i == 11){ //list信息遍历到底,从新开始遍历
i = 0;
}
}, 20);
}else if(bid.getAttribute("class")=="b2"){ //按键为停止
bid.style.backgroundColor = "greenyellow";
bid.setAttribute("class","b1");
bid.innerHTML = "开始";
clearInterval(mytime); //清除定时器
}
遇到的问题
当点击停止键时,定时器不会清除
原因
setTimeout函数和clearInterval函数出现在两个if语句中
解决方法
将两个函数写到一个if语句中
这样问题就解决了!!