javascript定时函数问题

如下代码,为什么点击开始按钮,然后点更改时间间隔按钮,这时再点停止按钮时就失效了。点开始后再点停止,就能正常停止。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>定时函数</title>
<script type="text/javascript">
var n = 0;
var timer;

function t() {
document.getElementById('b').innerHTML = '数字:' + (++n);
}

function kaiShi() {
timer = setInterval("t()",1000);
}

   function quit() {
    var tui = clearInterval(timer);
   }

   function gai() {
timer = setInterval("t()",500);
   }
</script>
</head>
<body>
<label id='b'></label>
<input type="button" name="" value="start" onclick="kaiShi()">
<input type="button" name="" value="停止" onclick="quit()">
<input type="button" name="" value='更改时间间隔为0.5秒' onclick="gai()">
</body>
</html>


fenkapian
浏览 2596回答 2
2回答

super_mb

定时器设置之后要清除,需要利用它返回的ID值,调用clearInterval()这个函数才可以清除定时器。在你的代码里,开始时timer存的是1000毫秒的定时器的ID,而当你更改为500毫秒的定时器时,timer存的是500毫秒定时器的ID值,这时候你没有办法再获取1000毫秒的定时器的ID值,清除的只有500毫秒的定时器。如果要达到想要的效果,可以将函数gai()改成这样:function gai() {     clearInterval(timer); //此时timer的值还是1000毫秒定时器的ID值,先把它清除了     timer = setInterval("t()",500);  //再开启新的定时器,此时timer的值是500毫秒的定时器 }

woshiajuana

很简单,你点击了时间开始按钮timer = setInterval("t()",1000);开始跳动然后你没有清除这个开始按钮创建的timer变量所指示的setInterval("t()",1000);定时器,就点击那个更改时间间隔按钮,又一次创建setInterval("t()",1000);定时器,并且把timer变量改成了第二次创建的,你的这种赋值法并不能清除掉你第一次点击开始创建的setInterval("t()",1000)定时器所以当你点击停止的时候,那个第二次赋值给timer变量的定时器被清除掉了,但第一次的那个却没有清除理解了的话,还请采纳
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript