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

相关文章

来自专栏Jack-Cui

Python3网络爬虫(九):使用Selenium爬取百度文库word文章

运行平台: Windows Python版本: Python3.x IDE: Sublime text3 1 前言     大家都应该有过从百度文库下...

75160
来自专栏Android知识点总结

$utils使用全指南----持续更新

17140
来自专栏DeveWork

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

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

29790
来自专栏轻扬小栈

让人纠结的首行缩进

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

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

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

84520
来自专栏葡萄城控件技术团队

三天学会HTML5 之第一天

引言 HTML5 一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念。 首先了解一些基本的术语和概念。 SGML, ...

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

React + Redux 组件化方案

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

70800
来自专栏瞎说开发那些事

RPA解决网页元素随机变化的问题

22560
来自专栏Hongten

使 Excel 规则更容易理解(Oracle Policy Modeling-Make your Excel rules easier to understand)

您可以使用图例关键字创建在 Excel 中引用属性的缩写方式。可以根据情况指定此缩写形式。

10520
来自专栏青玉伏案

iOS可视化动态绘制连通图(Swift版)

上篇博客《iOS可视化动态绘制八种排序过程》可视化了一下一些排序的过程,本篇博客就来聊聊图的东西。在之前的博客中详细的讲过图的相关内容,比如《图的物理存储结构与...

31570

扫码关注云+社区

领取腾讯云代金券