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

相关文章

来自专栏Material Design组件

Human Interface Guidelines — Text Fields

1505
来自专栏轻扬小栈

让人纠结的首行缩进

1172
来自专栏腾讯IVWEB团队的专栏

React + Redux 组件化方案

在介绍组件化方案之前,先对 react 和 redux 做一个简单介绍。理想中的组件化,第一步应该就是组件的标签化, 例如有一个 Header 组件,无需关注...

6500
来自专栏互联网杂技

React数据流和组件间的通信总结

首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则。 先介绍单向数据流吧。 React单向数据流:   React是单向数据流,数据主要...

3597
来自专栏大学生计算机视觉学习DeepLearning

2018最新mfc作为上位机接收硬件端USB或串口数据显示成图片 解决串口接收数据丢字节丢包问题

第一步:首先建立一个MFC工程,成功后会跳出一个对话框,直接在对话框上点击右键-》点击插入ACTIVAE控件-》选择MicrosoftCommunication...

4002
来自专栏雨过天晴

控制台输出颜色控制(Console

前端时间,写了一篇 PHP 在 Console 模式下的进度显示 ,正好最近的一个数据合并项目需要用到控制台颜色输出,所以就把相关的信息整理下,写到OSC的博客...

6971
来自专栏深度学习自然语言处理

爬虫基础入门

为什么要学习爬虫 其实我们身边到处都是爬虫的产物,比如我们经常用的Google,百度,bing等,这些搜索引擎就是根据你的需求在网上爬去相关的网页;比如...

3688
来自专栏Python绿色通道

Python爬虫:现学现用xpath爬取豆瓣音乐

爬虫的抓取方式有好几种,正则表达式,Lxml(xpath)与BeautifulSoup,我在网上查了一下资料,了解到三者之间的使用难度与性能

1603
来自专栏DeveWork

代码实现WordPress自动关键词keywords与描述description

之前在文章《WordPress自定义栏目运用实例II:添加文章Meta标签(keywords /description)》中给出了手动添加关键词keywords...

2479
来自专栏IMWeb前端团队

React + Redux 组件化方案

React + Redux 组件化方案 在介绍组件化方案之前,先对 react 和 redux 做一个简单介绍。 Why React 理想中的组件化,第一步应该...

2138

扫码关注云+社区