JS中多个setTimeOut函数为什么会同时运行？

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>

<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body>

</html>

我是前端新手。写了一段计时器的代码。代码如上，为什么多次点击按钮后，计时器速度会加倍，多个setTimeOut函数同时运行？JS不是单线程的吗？

你每点一次，就执行一次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>

你需要一个变量来存储定时器，就是单例。
每次点击按钮的时候，先将定时器clear，否则就会不断在内存中产生新的定时器。

clearTimeout(变量)
变量=null

没错啊是单线程的,但是要注意的是,你每次一点就会又产生一个新的计时器,这些计时器会在你的时间间隔也就是1s时执行,因为js是单线程的,所以你只要加上setTimeout就是放到后面执行,也就是等代码执行后再执行这个里面的代码,并且是在解释器有空时就会执行,所以你每次点击就加快就可以解释了,也就是在1s的时间间隔时执行了其他的计时器。
可以试着对代码进行如下修改:

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);
}

【热门文章】