解决JS定时器越走越快

切图仔

发布于 2022-09-08 16:32:48

6.3K0

发布于 2022-09-08 16:32:48

文章被收录于专栏：生如夏花绚烂

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

<!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>

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

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

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

解决定时器加快问题

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-08-06 ，如有侵权请联系 cloudcommunity@tencent.com 删除

定时器