Tang小溪
2016-04-27 23:00
<!DOCTYPE HTML> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>系好安全带,准备启航</title> <script type="text/javascript"> function kaishi() { var time=new Date(); document.getElementById("in").value=time; setInterval("kaishi()",1000); } function jieshu() { clearInterval("kaishi()") } </script> </head> <body> <form> <input type="text" id="in" size="50px" /> <br/> <input type="button" value="点击开始计时" onClick="kaishi()"> <input type="button" value="点击停止计时" onClick="jieshu()"> </form> </body> </html>
我做的这个有两个按钮,点击第一个,开始每秒刷新计时器。点击第二个,停止刷新计时器。
第一个没问题,第二个怎么也停不下来。还有,一下电脑内存占得特别高,卡住了,什么原因?
唉,现在每节课都得提问题,每节课都得遇到挫折。好难呀!
clearInterval的参数是setInterval的返回值。所以正确用法i=setInterval("kaishi()",1000); clearInterval(i)
要区分setInterval与setTimeout,前者每单位秒进行一次调用,后者延迟单位秒后调用一次,所以,你用setInterval还自调用,每新的一秒,原有计时器调用函数加新计时器,新来的计时器也要调用函数加计时器,每一秒都在加大量计时器,大量占用内存,当然卡住了。
仔细看参数用法,少走弯路,每节课都有问题是好事,现在发现的问题越多,学到的就越多,每个问题都能延伸出很多小细节知识点。
下面放修正过的代码
<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>
<script type="text/javascript">
function kaishi()
{
var time=new Date();
document.getElementById("in").value=time;
}
i=setInterval("kaishi()",1000);
function jieshu()
{
clearInterval(i)
}
</script>
</head>
<body>
<form>
<input type="text" id="in" size="50px" />
<br/>
<input type="button" value="点击开始计时" onClick="kaishi();">
<input type="button" value="点击停止计时" onClick="jieshu()">
</form>
</body>
</html>
楼上说的好仔细!给一百个赞
JavaScript进阶篇
468194 学习 · 21891 问题
相似问题
回答 1
回答 5
回答 2
回答 3
回答 2