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

关于此任务遇到的问题如何优化一下:任务 补充右边编辑器第16行,完成取消计时器函数。 补充右边编辑器第23行,点击Start按钮后,开始计数。 补充右边编辑器第24行,点击Stop按钮后,停止计数。

代码如下,如何解决我点击两次start按钮他就速度加倍(可能不止一倍)了,点击多次根本停不下来,stop就没用了

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


提问者:慕粉3780355 2016-09-11 19:26

个回答

  • 打边炉
    2016-09-14 23:04:36

      var num=0;

      var i;

      function startCount(){

        document.getElementById('count').value=num;

        num=num+1;

        i=setTimeout("startCount()",1000);

        document.getElementById('start').onclick=null;

        

      }

      function stopCount(){

        clearTimeout(i);

        document.getElementById('start').onclick=function(){startCount();}

      }

    动态修改onclick的值,点击start后将start的onclick事件设置为空,点击stop后将start的onclick重新设置为startcount。目前没发现其他问题,请大神检查

  • qq_陈暮_03715094
    2016-09-11 20:10:11

    做的时候还真没发现这个问题,你可在每次调用的时候

      function startCount(){

       clearTimeout(i);//在每次调用这个函数的时候的时候都把setTimeout给暂停了,然后代码还会按照顺序执行

        document.getElementById('count').value=num;

        num=num+1;

        i=setTimeout("startCount()",1000);

      }

    我也是刚刚学,说的不一定对,不过这样是可以完成的,但是每一次点击都会加一。这个问题留给大神吧