我之理解---计时器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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/253874.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！