如何为JavaScript计时器添加clearInterval解决重复点击加速问题

DevOps 小满

2026-8-14

计时器重复点击加速问题的解决方法

你遇到的问题是重复点击开始按钮后计时器速度越来越快，这是因为每次点击都会创建一个新的定时器，旧的定时器没有被清除，多个定时器同时执行就会让计时速度翻倍甚至更快。

你当前代码里的interval是函数内部的局部变量，在第4行调用clearInterval(interval)时，这个变量还没被声明赋值，所以这行代码根本起不到清除旧定时器的作用。

解决办法

把interval变量提升到全局作用域，和minutes、seconds一起声明，这样每次调用PomodoroBreak函数时，就能先清除上一次的定时器，再创建新的：

var minutes;
var seconds;
var interval; // 全局声明定时器变量
function PomodoroBreak(x){
    clearInterval(interval); // 先清除旧定时器
    minutes = x;
    seconds = 0;
    

    interval = setInterval( // 赋值给全局变量，方便后续清除
        function(){
            var el = document.getElementById("timer")
            if(seconds == 0 && minutes == 0){
                clearInterval(interval)
                el.innerHTML = "00:00"
                
            }
            else if(seconds == 0){
                minutes--;
                seconds = 59;
                // 补零优化，保证格式统一为MM:SS
                el.innerHTML = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            }else if(seconds > 0){
                seconds--;
                el.innerHTML = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                document.title = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            }
        },
        1000
    )
}