                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

请同学帮我看看这是哪里错了。一个小计时器。运用clearInterval（）无法停止循环。

<!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>

我做的这个有两个按钮，点击第一个，开始每秒刷新计时器。点击第二个，停止刷新计时器。

第一个没问题，第二个怎么也停不下来。还有，一下电脑内存占得特别高，卡住了，什么原因？

唉，现在每节课都得提问题，每节课都得遇到挫折。好难呀！

Tang小溪

2016-04-27

源自：JavaScript进阶篇 8-4

关注问题我要回答

772

操作

收起

2 回答

kuban 回答被采纳 +3 积分
2016-04-28

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>