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

今天在写个图片切换的问题 有动画滞后的问题,才动手去查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。我自己也算是理解了。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2635
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2547
来自专栏魂祭心

原 canvas绘制clock

4054
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2142
来自专栏杨龙飞前端

scrollto 到指定位置

2494
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏java 成神之路

使用 NIO 实现 echo 服务器

4607
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2526
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

2958
来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

4858

扫码关注云+社区