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

    官方直达电梯 Spark一种基于内存的通用的实时大数据计算框架(作为MapReduce的另一个更优秀的可选的方案) 通用:Spark Core 用于离线计算,Spark SQL 用于交互式查询,Spa ...

  2. 如何打war包

    1. 利用jdk里的工具 例如我们要打包的文件在D:\myHome\dist: 运行 cmd: cd D:\myHome\dist 进入D:\myHome\dist 然后输入 D:\myHome\di ...

  3. 10 TCP 传输控制协议 UDP区别

    1.tcp和udp区别 2.TCP通信模型 生活中的电话机 如果想让别人能更够打通咱们的电话获取相应服务的话,需要做一下几件事情: 买个手机 插上手机卡 设计手机为正常接听状态(即能够响铃) 静静的等 ...

  4. mock.js中新增测试接口无效，返回404

    项目是使用的npm+vue+mock模拟数据 我碰到的是在mock配置文件中新增接口,但是接口在测试时无效,返回404.但是在前端代码中把新接口换成配置文件中之前就有的,然后测试就正常了. 所以按问题 ...

  5. 保证IO流不出错

    package com.io.demo1; import java.io.FileInputStream;import java.io.IOException; /** * 测试IO * io流,输入 ...

  6. 台湾ML笔记--1.2 formalize the learning probelm

    Basic notations input:     x∈χ  (customer application) output:   y∈y  (good/bad after approving cred ...

  7. Qt编译出错：During startup program exited with code 0xc0000135

    原文连接:http://blog.csdn.net/wswxfwps/article/details/37317905 出现这个问题,是因为我用到了外部的dll库,lib库我是添加到了.pro文件中了 ...

  8. 可以完成99%的静态页面的HTML标签

    HTML:一套浏览器认知的规则HTML分为两个部分,头和身体.一个完整的网页相当于一个裸体的人,我们利用HTML给它穿上衣服,使它更好看.下面我将为大家介绍一下HTML一些基本的标签,而这些基本的标签 ...

  9. GBDT && XGBOOST

                                  GBDT && XGBOOST Outline Introduction GBDT Model XGBOOST Model ...

  10. hyperledger composer

    hyperledger composer 网站搜集 https://hyperledger.github.io/composer/latest/introduction/introduction.ht ...