扫码关注官方订阅号
请点击上面的按钮。输入框会从 0 开始一直进行计时。
我是前端新手。写了一段计时器的代码。代码如上,为什么多次点击按钮后,计时器速度会加倍,多个setTimeOut函数同时运行?JS不是单线程的吗?
人生最曼妙的风景,竟是内心的淡定与从容!
没错啊 是单线程的,但是要注意的是,你每次一点就会又产生一个新的计时器,这些计时器会在你的时间间隔也就是1s时执行,因为js是单线程的,所以你只要加上setTimeout就是放到后面执行,也就是等代码执行后再执行这个里面的代码,并且是在解释器有空时就会执行,所以你每次点击就加快就可以解释了,也就是在1s的时间间隔时执行了其他的计时器。可以试着对代码进行如下修改:
setTimeout
var c=0; var t; function timedCount(condition) { clearTimeout(t); document.getElementById('txt').value = c; ++c; t = setTimeout(function(){ timedCount(true); },1000); }
但是这样仍然有一个问题,那就是每次你一点击就会+1,加一个判断的话,可以解决(但是你点击时数字不会发生变化,因为此时传入的参数是false,需要到你鼠标离开一秒后再继续执行代码)
var c=0; var t; function timedCount(condition) { clearTimeout(t); document.getElementById('txt').value = c; condition ? ++c : c; t = setTimeout(function(){ timedCount(true); },1000); }
你需要一个变量来存储定时器,就是单例 。每次点击按钮的时候,先将定时器clear,否则就会不断在内存中产生新的定时器。
clearTimeout(变量)变量=null
你每点一次,就执行一次timedCount,产生一个新的定时器你之前设置的定时没有清理掉,导致你的定时器随着你的点击次数的增加而增加
代码修改为:
<script type="text/javascript"> var t; function timedCount(continueFlag) { var countEle=document.getElementById('txt'); var current=parseInt(countEle.value)||0; continueFlag = continueFlag||false; if(!continueFlag){ t&&clearTimeout(t); countEle.value=0; }else{ countEle.value= current+1; } t=setTimeout(function(){ timedCount(true); },1000); } </script>
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
没错啊 是单线程的,但是要注意的是,你每次一点就会又产生一个新的计时器,这些计时器会在你的时间间隔也就是1s时执行,因为js是单线程的,所以你只要加上
setTimeout就是放到后面执行,也就是等代码执行后再执行这个里面的代码,并且是在解释器有空时就会执行,所以你每次点击就加快就可以解释了,也就是在1s的时间间隔时执行了其他的计时器。可以试着对代码进行如下修改:
但是这样仍然有一个问题,那就是每次你一点击就会+1,加一个判断的话,可以解决(但是你点击时数字不会发生变化,因为此时传入的参数是false,需要到你鼠标离开一秒后再继续执行代码)
你需要一个变量来存储定时器,就是单例 。
每次点击按钮的时候,先将定时器clear,否则就会不断在内存中产生新的定时器。
clearTimeout(变量)
变量=null
你每点一次,就执行一次timedCount,产生一个新的定时器
你之前设置的定时没有清理掉,导致你的定时器随着你的点击次数的增加而增加
代码修改为: