关于setTimeout()多次点击速度飙升问题!

来源:8-6 取消计时器clearTimeout()

指爱六弦

2017-05-26 11:23

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>计时器</title>


<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速度就会加快?哪位大神能给个终极解释?跪求!

写回答 关注

2回答

  • AAAaaZz3248469
    2017-08-01 00:03:59

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>计时器</title>


    <script type="text/javascript">

      var num=0;

      var i;

      var flag=false;

      

    //增加一个布尔变量用于存储值代表start是否开始

    //这个方法要置于循环体外

      function flag1(){

        if(flag==false){

           startCount();

           flag=true;

        }else{

           return 0;

        }

      }

      function startCount(){

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

        num=num+1;

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

      }

      function stopCount(){

        clearTimeout(i);

        flag=false;

      }

    </script>

    </head>

    <body>

      <form>

        <input type="text" id="count" />

        <input type="button" value="Start" onclick="flag1()" />

        <input type="button" value="Stop" onclick="stopCount()"  />

      </form>

    </body>

    </html>



    增加一个开关装置即可解决点一次start键就多一个计数器增加num值的问题。

  • 慕勒7123956
    2017-05-26 11:30:10

    因为你在startCount中又调用了它本身,所以你多次点击之后,是多个计时器同时运行的,比如点第一次是一个计时器,再点一下,就是两个计时器,这时候每次就是+2,所以速度会不断提升

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468194 学习 · 21891 问题

查看课程

相似问题