多次点击start开始计时为什么还能停下来？怎么解释？

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

点击一次start按钮，执行startCount()函数，变量i被赋值，但我在重复点击strat按钮重复调用startCount()函数时，变量i不应该被覆盖上了新的值了吗？但为什么我还能进行重复点击stop按钮使计数停下来？

谁能帮忙解释一下，谢谢。

补充：

详细流程是这样的：

（1）我多次点击开始按钮，开启了很多个setTimeout()函数进行递归；

（2）可以看到计数因为有多个setTimeout()运行，计数跳动的很快；

（3）我再逐个点击停止，计数函数还是能够逐个关闭。

问题是：变量 i 不应该是记录我最后一次点击开始按钮所对应的setTimeout()函数的id吗？之前的全部setTimeout()函数的id不应该是被覆盖掉了吗？为什么我还能正常的停止计数？之前被覆盖掉的id是怎么找到的？

请指点一下谢谢。