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

浏览 2680回答 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