我之理解---计时器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" οnclick="startCount() "/><input type="button" value="Stop" οnclick="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。我自己也算是理解了。

自己的一些理解，如有不当之出，还望路过的园友不吝指教，助我早日走上正道。

转载于:https://www.cnblogs.com/hi-shepherd/p/6130925.html

我之理解---计时器setTimeout 和clearTimeout相关推荐

js中setTimeout的用法和JS计时器setTimeout与setInterval方法的区别和confirm方法
setTimeout()在js类中的使用方法 setTimeout (表达式,延时时间) setTimeout(表达式,交互时间) 延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTi ...
用requestAnimationFrame和cancelAnimationFrame取代定时器setTimeout和clearTimeout
1. 浏览器的刷新时间和定时器的时间不同,会出现掉帧现象,定时器的时间越短,掉帧越严重.定时器的时间并不是非常精准,会将定时器放在执行队列中,也是要花费时间的. 浏览器的刷新时间大约是16ms(电脑此 ...
巧用setTimeout和clearTimeout 对输入事件进行优化处理
项目背景前一阵做了一个需求,大概是用户在输入框输入URL链接时,前端需要对链接实时搜索并与后台数据库匹配.如果发现链接是通过我们的工具箱生成落地页的,就可以接着选择该落地页链接匹配的转化事件,进行后 ...
16、计时器方法2（setTimeout、clearTimeout、防抖、节流）
1.计时器(2秒后输出):setTimeout // 1.计时器(2秒后输出):setTimeoutvar time = null;timer = setTimeout(() => {conso ...
js中setTimeout和clearTimeout的使用
一.概念 1.js中可以通过setTimeout函数设置定时器,让指定的代码在指定的时间运动. 如果我们希望在setTimeout之行前终止其运行就可以使用clearTimeout(). 2.clea ...
nodejs定时器setInterval，setTimeout，clearTimeout， clearInterval源码学习
nodejs Timer nodejs Timer timer.unref()的失效情况先看timer.unref的底层调用对失效的解释定时器的创建 TimerWrap TimerWrap() ...
js中计时器setTimeout、setInterval、requestAnimationFrame区别
转载自:https://www.cnblogs.com/xiaohuochai/p/5777186.html 本文仅用于作为学习笔记计时器一直是javascript动画的核心技术.而编写动画循环的关 ...
JS中定时器setTimeout,setInterval,clearTimeout,clearInterval用法
setTimeout是指过多久执行,只执行一次 setInterval是指每过多久执行一次 clearTimeout是关闭setTimeout定时器 clearInterval是关闭setInterv ...
JS之setTimeOut与clearTimeOut
小练习1:针对HTML,分别使用 setTimeout 和 setInterval 实现以下功能: 点击按钮时,开始改变 fade-obj 的透明度,开始一个淡出(逐渐消失)动画,直到透明度为0 在动 ...

我之理解---计时器setTimeout 和clearTimeout

我之理解---计时器setTimeout 和clearTimeout相关推荐

最新文章

热门文章