今天在写个图片切换的问题 有动画滞后的问题，才动手去查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. Spring 中的文件上传与下载控制

    先创建根应用上下文配置,WebDemo/src/main/java/com/seliote/webdemo/config/RootContextConfig.java package com.seli ...

  2. Django admin操作

      无名小妖     昵称:无名小妖园龄:1年6个月粉丝:22关注:1 +加关注 搜索     常用链接 我的随笔 我的评论 我的参与 最新评论 我的标签 我的标签 Python(1) python3 ...

  3. Bootstrap4用法

    #Bootstrap4 ## 网格系统- .col- 针对所有设备- .col-sm- 平板 - 屏幕宽度等于或大于 576px- .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)- ...

  4. Qt 汽车仪表 QWidget

    今天是2016年的最后一个工作日,在这个最后工作日里面,和以为网友要了一点练手的素材文件,经过网友确认,不涉及商业机密,在这里分享一下,如侵权,请联系我删除. 先上程序运行图 这里显示数字,闪烁等都没 ...

  5. jmeter接口测试--参数化

    接口测试时遇到一些属性不能重复时,可以使用Random 随机函数,除此之外,也可以用用户参数 一..随机参数化 1.在jmeter工具,菜单-选项-函数助手对话框,输入数值,属性,点击生成: 2.在相 ...

  6. Python网络编程（进程池、进程间的通信）

    线程池的原理:        线程池是预先创建线程的一种技术.线程池在还没有任务到来之前,        创建一定数量的线程,放入空闲队列中.这些线程都是处于睡眠状态,        即均为启动,不消 ...

  7. Halcon17无法加载"hdevenginecpp":找不到指定的模块

    Halcon17无法加载"hdevenginecpp":找不到指定的模块 在C#和Halcon17混合编程中,当执行private HDevEngine MyEngine = ne ...

  8. 无法注册DLL/OCX:regsvr32 failed with exit code 0x5

    最近在服务器上装一个等值线控件,确报错: RegSvr32 failed with exit code 0x5   尝试解决方法1: 在cmd下 运行for %1 in (%windir%\syste ...

  9. C++ 中神奇的头文件，懒人专用

    今天在做题的时候,偶然发现了一种神奇头文件.他的使用方法以及内容如下: #include <bits/stdc++.h> // C++ includes used for precompi ...

  10. [android]不解锁刷机

    本人因为误操作进入andriod recovery模式,显示failed to boot 2,致手机无法恢复出厂值, 当时那叫一个郁闷.上论坛搜寻无数,唉让刷底包的无数(在此不解释),万恶的刷底包. ...