解决JS定时器越走越快

2022-09-08 16:32:48 浏览数 (1)

如下简单案例，实现一个倒计时

代码语言：javascript复制

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button>倒计时</button>还剩<span>60</span>
    <script type="text/javascript">
        var time = document.querySelector('span');
        var btn = document.querySelector('button');
        var s = 60;
        btn.onclick=function(){
            setInterval(function(){
                s--
                time.innerText=s
            },1000);
        }
    </script>
</body>
</html>

当我们多次点击按钮时会使定时器加快

根本原因是点击按钮时触发了多次定时器。我们只需要在触发函数时进行判断，如果存在定时器则清除否则才运行改进一下刚才的代码

代码语言：javascript复制

...
var timer = null;
btn.onclick=function(){
    if(timer){
        clearInterval(timer)
        timer = null
    }
    timer = setInterval(function(){
        s--
        time.innerText=s
    },1000);
}

解决定时器加快问题

定时器函数

0 人点赞