我之理解---计时器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 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

在Java中如何避免“!=null”式的判空语句?

我整天都是在跟Java打交道。我在Java开发中最常用的一段代码就是用object != null在使用对象之前判断是否为空。这么做是为了避免NullPoint...

401
来自专栏.NET技术

C#系列之String和StringBuilder

      首先和博园的各位打声招呼,小弟在博园呆了也有一年多了。平常一有时间就会过来看看文章,学习各位的经验,现在养成了一种一天不来博园,心里就不踏实的习惯,...

724
来自专栏不二小段

Python为什么文件运行和在命令行运行同样语句但结果却不同?

这篇是之前知乎上的一个提问,感觉非常有趣而且内容丰富,所以把我自己的回答搬运到公众号来。 另外关于昨天的推送,是因为我之前把文章投到了Python中文社区的公众...

35913
来自专栏Java架构师学习

编写 Spring 配置文件的最佳实践

Spring 是一个功能强大的Java应用框架,提供各种配置选项。它的核心特性是为简单的Java对象(PO??JO)提供服务,称为 Bean。 Spring使用...

3257
来自专栏北京马哥教育

Python 函数库 APIs 编写指南

1934
来自专栏CodingToDie

Python学习(九):错误再多 我也要改正

当遇到错误的时候,有时我们并不想终止程序运行,遇到某些错误,我们想给用户一个友好的提示,告诉用户为什么出错,这也是必要的。

3386
来自专栏java一日一条

在Java中如何避免“!=null”式的判空语句?

我整天都是在跟Java打交道。我在Java开发中最常用的一段代码就是用object != null在使用对象之前判断是否为空。这么做是为了避免NullPoint...

392
来自专栏跟着阿笨一起玩NET

.NET轻量级DBHelpers数据访问组件

473
来自专栏恰同学骚年

【译】ASP.NET应用程序和页面生命周期

  一、此文是Code Project社区2010年4月ASP.NET板块的最佳文章,说明了此文的份量;

983
来自专栏恰同学骚年

你必须知道的指针基础-3.指针的移动及指针的危险

  指针每次加一就是指针向前移动指针类型对应的字节数。下面通过一个int指针来指向一个int数组,看看指针的加法运算到底是个什么鬼?

702

扫码关注云+社区