今天在写个图片切换的问题 有动画滞后的问题，才动手去查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=;

  var i;

  function startCount(){

    document.getElementById('count').value=num;

    num=num+;

    i=setTimeout("startCount()",);

  }

  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的更多相关文章

  1. JS window对象 取消计时器clearTimeout() setTimeout()和clearTimeout()一起使用，停止计时器。 语法: clearTimeout(id_of_setT

    取消计时器clearTimeout() setTimeout()和clearTimeout()一起使用,停止计时器. 语法: clearTimeout(id_of_setTimeout) 参数说明: ...

  2. 关于javascript中setTimeout()和clearTimeout()的疑惑。

    由于在w3school中学习javascript时,当学到setTimeout()和clearTimeout()方法时.根据它所提供的例子(下面的代码转自w3cschool)—计数程序,发现当你不停的 ...

  3. 结合setTimeout和clearTimeout，实现“返回顶部”的功能

    结合setTimeout和clearTimeout,当页面停止滚动时,“返回顶部”按钮淡隐淡出.点击“返回顶部”页面以动画形式返回顶部.完美兼容ie6-11,firefox,chrome等. html ...

  4. 利用setTimeOut 和clearTimeOut 方法控制写一个 滑动导航显示不同信息的效果

    效果如图鼠标滑动导航  下边显示不同效果 html代码和css格式代码 <body><div id="tab" class="tab"> ...

  5. JavaScript--定时器setTimeout()、clearTimeout(var param)和setInterval()、clearInterval(var param)

    1.setTimeout().clearTimeout(var param) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,只调用一次 clearTimeout() 方法可取 ...

  6. JS window对象 计时器setTimeout() setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。 语法: setTimeout(代码,延迟时间);

    计时器setTimeout() setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次. 语法: setTimeout(代码,延迟时间); 参数说明: 1. 要调用的函数 ...

  7. setTimeout、clearTimeout、setInterval,clearInterval ——小小计时器

    先看下效果 话不多说上代码~ <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Typ ...

  8. js中setTimeout和clearTimeout的使用

    setTimeout,延迟n秒后执行指定代码 clearTimeout,清除计时器 <html> <head> <script type="text/javas ...

  9. settimeout，cleartimeout的使用分析

    设置时间的定时轮回执行,大家想到的js也就是settimeout这个方法,这个方法确实能够实现定时反复执行的功能,clearttimeout这是清理或者是暂停轮回执行的情况.可是发现clearttim ...

随机推荐

  1. Android面试收集录 2D绘图与动画技术

    1.如何在Android应用程序的窗口上绘制图形? 继承View 实现View中的onDraw()方法 2.如何绘制圆,空心椭圆? canvas.drawArc或canvas.drawCircle方法 ...

  2. Java线程：概念与使用

    Java线程大总结 原文章地址:一篇很老的专栏,但是现在看起来也感觉深受启发,知识点很多,很多线程特点我没有看,尴尬.但是还是整理了一下排版,转载一下. 操作系统中线程和进程的概念 在现代操作系统中, ...

  3. 第6模块 web框架口述题

    状态码如200 OK,以3位数字和原因 成.数字中的 一位指定了响应 别,后两位无分 .响应 别有以下5种. 重定向:客户端像服务器端发送请求,服务器告诉客户端你去重定向(状态码302,响应头loca ...

  4. vs调试代码的时候断点无法命中

    https://blog.csdn.net/xxdddail/article/details/18696399 该链接提供的解决方案主要是如下图片:禁用 图片标记的这个选项即可:

  5. (原)编写JAVA工具之json自动封装成pojo

    代码在最后 我个人是不太喜欢http和json,可能是游戏做的多了的原因的,对通信协议和通信方式特敏感,因此即使是做应用我也会选择rpc而非http,但是有时候因为各种原因,还是不的不处理标准的htt ...

  6. Spring框架中ModelAndView、Model、ModelMap的区别

    转自:http://blog.csdn.net/liujiakunit/article/details/51733211 1. Model Model 是一个接口, 其实现类为ExtendedMode ...

  7. C变量之间的转换

    int main(){ //定义了三个变量分别是abc ab的值分别是5跟8 c没有赋值  把b的值给c 把a的值给b 把c的值给a 形成了一个ab值得转换: int a=5; int b=8; in ...

  8. kafka常用命令笔记

    0.查看有哪些主题: ./kafka-topics.sh --list --zookeeper 192.168.0.201:12181 1.查看topic的详细信息 ./kafka-topics.sh ...

  9. 1066 Root of AVL Tree （25 分）（平衡二叉树）

    就是AVL的模板题了 注意细节 #include<bits/stdc++.h> using namespace std; typedef struct node; typedef node ...

  10. BZOJ 4592 SHOI2015 脑洞治疗仪 线段树

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4592 题意概述:需要维护一个01序列A,一开始A全部都是1.支持如下操作: 1.将区间[l ...