问答详情
源自：8-4 取消计时器clearInterval()

请同学帮我看看这是哪里错了。一个小计时器。运用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 23:00

个回答

  • kuban
    2016-04-28 09:53:30
    已采纳

    1. clearInterval的参数是setInterval的返回值。所以正确用法i=setInterval("kaishi()",1000); clearInterval(i) 

    2. 要区分setInterval与setTimeout，前者每单位秒进行一次调用，后者延迟单位秒后调用一次，所以，你用setInterval还自调用，每新的一秒，原有计时器调用函数加新计时器，新来的计时器也要调用函数加计时器，每一秒都在加大量计时器，大量占用内存，当然卡住了。

    3. 仔细看参数用法，少走弯路，每节课都有问题是好事，现在发现的问题越多，学到的就越多，每个问题都能延伸出很多小细节知识点。

    4. 下面放修正过的代码

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

    0
  • qq_对着世界微笑_0
    2016-04-28 14:29:33

    楼上说的好仔细！给一百个赞

    0