首页手记关于JavaScript定时器的作业题目深入探讨

关于JavaScript定时器的作业题目深入探讨

标签：

JavaScript

原题目http://www.imooc.com/code/1026
作业源代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
  var num=0;
  var i;
  function startCount(){
    document.getElementById('count').value=num;
    num=num+1;
    i=setTimeout("startCount()",1000);
  }
  function stopCount(){
  clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="count" />
    <input type="button" value="Start" onClick="startCount()"  />
    <input type="button" value="Stop" onClick="stopCount()"   />
  </form>
</body>
</html>

在题目源代码中，多次点击start，计数器会越来越快：
有人问过这样的问题而且有了解决：为什么会有点击“start”计时器越来越快？
但是，为什么多次点击stop会越来越慢甚至停止呢？
如果把setTimeout 换成setInterval，会不会也能越来越慢呢？
这里，我们把setInterval的代码贴上：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">
  var attime=0;
  function clock(){
    attime++;
    document.getElementById("clock").value = attime;
  }
  function startCount()
  {
       var i=setInterval(clock,1000);
  }
 function stopCount()
 {
     clearInterval(i);
 }
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50"  />
    <input type="button" value="Start" onClick="startCount()"  />
    <input type="button" value="Stop" onClick="stopCount()"   />
  </form>
</body>
</html>

此时我们多次点击start后的确会越来越快，但是再多次点击stop并不会停下来，那么这又是为什么呢？
那是因为：
我们只有一个i 用来保存intervalID,当我们点击stop只能clear最新的一个intervalID。
可是，为什么上一个例子timeout可以实现逐渐停下来呢？
那是因为：timeout采用自调用的方式实现循环，因此旧的timeout定时器会死亡形成新的timeout，因此我们clear i里面的timeoutID可以将其逐步清除直到停止，你明白了吗？

点击查看更多内容