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

多点一次开始记数快一次

可以理解成多线程的概念嘛，点一次开始每隔1秒更新一次value，再点一次开始就有两个线程同时每隔1秒更新一次value，也就造成了每0.5秒更新一次

但每点一次停止就慢一次又是怎么回事呢

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


提问者：C0EEC3F7BBAA 2016-07-15 21:04

个回答

  • 梦易醒
    2016-07-16 10:07:48

    <!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(){
      clearTimeout(i);//执行这个方法之前做一次清除 这样的效果就是点击后重新执行
    document.getElementById('count').value=num;
    num=num+1;
    i = setTimeout(startCount,1000);//这个i 是个全局变量
  }
   
  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>


    1
  • h_silence
    2016-07-16 09:42:32

    全局变量，点击几次就会被执行几次，从而造成加速。

    在执行开始之前先clear掉之前的setTimeout();

    你可以在startCount 里的第一句之前先执行stopCount()函数。

    0