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

多点一次开始记数快一次

可以理解成多线程的概念嘛，点一次开始每隔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

源自：JavaScript进阶篇 8-6

关注问题我要回答

851

操作

收起

2 回答

梦易醒
2016-07-16

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