码迷,mamicode.com
首页 > 其他好文 > 详细

我之理解---计时器setTimeout 和clearTimeout

时间:2016-12-04 16:55:36      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:htm   设置   --   png   多次点击   head   http   timeout   rip   

今天在写个图片切换的问题 有动画滞后的问题,才动手去查setTimeout 和clearTimeout。之前写的图片播放器也有类似的问题,有自动start按钮 和stop按钮,

其他都正常,问题出在每次多次快速的点击start按钮时,图片播放的速度会变块很多,而且没有规律。当时也没有去想这个问题,直到今天遇到了类似的问题

才决定去一探究竟。

列举个简单累加例子:

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

效果如下:

技术分享

   点击开始累加。多次点击开始按钮时,数字飙升的很快,取决于你点击的速度。

function startCount(){
      clearTimeout(i);
    document.getElementById(‘count‘).value=num;
    num=num+1;
   
    i=setTimeout("startCount()",1000);
    
  }

后来给startCount函数添加个clearTimeout(i);就解决了问题,当时不知其所以然。

今天仔细想了下原来是这么回事。

为什么在没有设置clearTimeout的时候多次点击数字会飙升?

1:当我们点击start按钮后就开始运行函数,先显示数字0,然后就运行到setTimeout,1s后执行一次startCount函数,因为函数内部有setTimeout  所以函数会一直执行下去,

 而当我们再次点击start按钮时,这个函数还会再执行一次,之前这个函数已经在执行了。那么这个函数就是交替执行,那么数字就会混乱,累加的速度翻倍了,至于和点击的次数是什么关系,没有过深入的研究,就不得而知了。

2:为什么在我们设置了clearTimeout后就可以避免这种情况的出现?

我们来运行一次函数,点击开始,函数开始运行,当运行到setTtimeout的时候设置了该函数1s后再运行一次,此时有个返回值 i 。在这个指令下达后,我们假设在这个1s的时间内再次点击start按钮会发生什么?(1s的时间还是很久的,我们可以点击N次鼠标),把这个被setTimeout设置执行的函数编号为A,我们再次点击触发执行的函数编号为B;那么B是瞬发的(计算机的速度毋庸置疑),而这个A还得0~1s之后才去执行(B在A先执行),b执行的时候函数内部有clearTimeout,所以就把这个setTimeout设置的A取消了,不用执行了。那么就只有B在执行了,无论怎么点击都不会出现混乱的情况了。

    那么问题来了,你设置了clearTimeout 那不就把设置的setTimeout终止掉了吗?那不就不会累加了吗?

  说真的当时我也疑惑了,那么来分析分析。函数执行一次,setTimeout设置了1s后再执行函数一次,(没有setTimeout就不运行函数了),指令下达后执行,我们去执行,

当进入到函数内部(也就是函数体)的时候遇到了clearTimeout 他说你们别再执行函数了。可我们已经在执行了,况且我们的指令也就是执行这一次,我们执行完了就不会执行了。此时的clearTimeout对我们这次执行函数没什么影响。(因为我们本来就是只执行这一次,就没有下次别执行的说法),如果把clearTimeout放在函数体外面就不一样了,我可以在外面先把你拦截,在你还没有执行,还没有进入函数内部的时候就拦截你,这样就达到了停止的作用,类似top按钮。

   END。我自己也算是理解了。

 

  自己的一些理解,如有不当之出,还望路过的园友不吝指教,助我早日走上正道。

 

我之理解---计时器setTimeout 和clearTimeout

标签:htm   设置   --   png   多次点击   head   http   timeout   rip   

原文地址:http://www.cnblogs.com/hi-shepherd/p/6130925.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!