我之理解---计时器setTimeout 和clearTimeout
Posted 随风
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我之理解---计时器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" 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的主要内容，如果未能解决你的问题，请参考以下文章
深入理解定时器系列第一篇——理解setTimeout和setInterval