我之理解---计时器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=;
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的更多相关文章
- JS window对象 取消计时器clearTimeout() setTimeout()和clearTimeout()一起使用，停止计时器。 语法: clearTimeout(id_of_setT
取消计时器clearTimeout() setTimeout()和clearTimeout()一起使用,停止计时器. 语法: clearTimeout(id_of_setTimeout) 参数说明: ...
- 关于javascript中setTimeout()和clearTimeout()的疑惑。
由于在w3school中学习javascript时,当学到setTimeout()和clearTimeout()方法时.根据它所提供的例子(下面的代码转自w3cschool)—计数程序,发现当你不停的 ...
- 结合setTimeout和clearTimeout，实现“返回顶部”的功能
结合setTimeout和clearTimeout,当页面停止滚动时,“返回顶部”按钮淡隐淡出.点击“返回顶部”页面以动画形式返回顶部.完美兼容ie6-11,firefox,chrome等. html ...
- 利用setTimeOut 和clearTimeOut 方法控制写一个 滑动导航显示不同信息的效果
效果如图鼠标滑动导航 下边显示不同效果 html代码和css格式代码 <body><div id="tab" class="tab"> ...
- JavaScript--定时器setTimeout()、clearTimeout(var param)和setInterval()、clearInterval(var param)
1.setTimeout().clearTimeout(var param) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,只调用一次 clearTimeout() 方法可取 ...
- JS window对象 计时器setTimeout() setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。 语法: setTimeout(代码,延迟时间);
计时器setTimeout() setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次. 语法: setTimeout(代码,延迟时间); 参数说明: 1. 要调用的函数 ...
- setTimeout、clearTimeout、setInterval,clearInterval ——小小计时器
先看下效果 话不多说上代码~ <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Typ ...
- js中setTimeout和clearTimeout的使用
setTimeout,延迟n秒后执行指定代码 clearTimeout,清除计时器 <html> <head> <script type="text/javas ...
- settimeout，cleartimeout的使用分析
设置时间的定时轮回执行,大家想到的js也就是settimeout这个方法,这个方法确实能够实现定时反复执行的功能,clearttimeout这是清理或者是暂停轮回执行的情况.可是发现clearttim ...
随机推荐
- 【python3.X】python练习笔记[1]
##三位数水仙花 ##方法一,小于指定数字的水仙花数 x=eval(input()) a,b,c = 0,0,0 for i in range (100,x,1): a=i%10 b=i//100 c ...
- 一步一步学Linq to sql（四）：查询句法
select 描述:查询顾客的公司名.地址信息 查询句法: var 构建匿名类型1 = from c in ctx.Customers select new { 公司名 = c.CompanyName ...
- Bootstrap4用法
#Bootstrap4 ## 网格系统- .col- 针对所有设备- .col-sm- 平板 - 屏幕宽度等于或大于 576px- .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)- ...
- 海思NB-IOT的SDK添加AT指令方法
1. 首先打开app_at_cmd_parse.c文件,在文件的末尾找到,可在中间添加需要的代码 /查询电信自注册结果 {AT_FLAG_VISIABLE | AT_FLAG_LOGABLE, &qu ...
- springmvc基础篇—拆分配置文件
一般来讲,在企业实际项目中通常会将配置文件设置为两个:spring-mvc.xml.beans.xml,各自管各自的内容,方便管理. 一.在src下增加如下配置文件: <?xml version ...
- VS2010使用NuGet程序包管理器
使用C#过程中经常需要使用一些扩展包,例如sqlite,json解析等. VS2010自带了一个扩展管理器,里面可以下载到AStyle,Visual Assit等有用的插件. VS2010中点击[工具 ...
- Markdown常用的几种语法
在VScode上面写的,现将代码粘贴如下:(在VScode里运行下即可) # Markdown语法 # Ctrl + k v 打开侧边预览 ## 一.加粗斜体删除线 **这是要加粗的文字** *这是要 ...
- day-13 python库实现简单非线性回归应用
一.概率 在引入问题前,我们先复习下数学里面关于概率的基本概念 概率:对一件事发生的可能性衡量 范围:0<=P<=1 计算方法:根据个人置信区间:根据历史数据:根据模拟数据. 条件概率:B ...
- hyperledger composer
hyperledger composer 网站搜集 https://hyperledger.github.io/composer/latest/introduction/introduction.ht ...
- Postmortem Report 第一轮迭代事后分析报告
一.设想和目标 1.1 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件<BlueZ>是一款全新动作类塔防游戏.与市面上已经存在的塔防游戏不同 ...