Javascript setInterval与clearInterval保持一致

我在做一个简单的打卡/打卡计时器

我面临的问题是，它在页面加载时工作得很好，但当用户单击end_work_btn然后单击begin_work_btn时，计时器会堆叠初始值和从0开始的新值，因此它会尝试同时显示这两个值。每次他们点击按钮时，它都会一直堆叠，直到页面重新加载时重置

我已经做了一系列的阅读，并认为clearInterval（计时器）可以做到这一点，但不行，所以假设我没有正确地使用它，或者我在这里的错误上偏离了方向

这是我到目前为止得到的

<button id="begin_work_btn">Begin Work</button>
<button id="end_work_btn"><span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span></button>

<script>
var emp_id = '2';
var timer = null;

function reset_timer(time){
    var sec = time;
    clearInterval(timer);

    function pad ( val ) { 
        return val > 9 ? val : "0" + val; 
    }

    var timer = setInterval( function(){
        $("#seconds").html(pad(++sec%60));
        $("#minutes").html(pad(parseInt(sec/60,10)%60));
        $("#hours").html(pad(parseInt(sec/3600,10)));
    }, 1000);
}

reset_timer(<?php echo $existing_time;?>);

$("#begin_work_btn").click(function(){

    $.ajax({
        type: "post",
        url: "<?php echo $url;?>process.php",
        data: "agent_id="+emp_id+"&action=begin_work",
        success: function(data){
            var sec = 0;
            reset_timer(sec);
            $('#begin_work_btn').hide();
            $('#end_work_btn').show();
        }
    });
});

$("#end_work_btn").click(function(){

    $.ajax({
        type: "post",
        url: "<?php echo $url;?>process.php",
        data: "agent_id="+emp_id+"&action=end_work",
        success: function(data){
            $('#end_work_btn').hide();
            $('#begin_work_btn').show();
        }
    });
});

</script>

开始工作
::
var emp_id='2'；
var定时器=null；
功能复位定时器（时间）{
var sec=时间；
清除间隔（计时器）；
功能板（val）{
返回值>9？值：“0”+值；
}
var timer=setInterval（函数（）{
$（“#秒”）.html（pad（++秒%60））；
$（“#分钟”）.html（pad（parseInt（sec/60,10）%60））；
$（“#小时”）.html（pad（parseInt（sec/3600,10））；
}, 1000);
}
重置计时器（）；
$（“#开始工作”_btn”）。单击（函数（）{
$.ajax({
类型：“post”，
url:“process.php”，
数据：“代理id=“+emp\U id+”&操作=开始工作”，
成功：功能（数据）{
var-sec=0；
重置定时器（秒）；
$（'#开始工作'.hide'）；
$（'end#u work_btn'）.show（）；
}
});
});
$（“#结束工作”_btn”）。单击（函数（）{
$.ajax({
类型：“post”，
url:“process.php”，
数据：“代理id=“+emp\U id+”&操作=结束工作”，
成功：功能（数据）{
$（'end#u work_btn'）.hide（）；
$（'#开始工作'.show'）；
}
});
});

非常简单，范围不同。在代码中有两个名为timer的变量。每次调用

reset\u timer

时，都会创建函数中的一个。外面的人永远得不到价值。因此，每次调用该函数时，都会创建另一个计时器实例

var timer = null; //<-- outside 

function reset_timer(time){
    clearInterval(timer);
    var timer = setInterval( ... , 1000); //<--redefined inside so each time, it creates new variable
}

不应使用var定义它。这样，每次调用它时，它都会更新在函数外部定义的变量

var timer = null; 

function reset_timer(time){
    if (timer) clearInterval(timer);
    timer = setInterval( ... , 1000); //<--no more var
}

var定时器=null；
功能复位定时器（时间）{
if（定时器）清除间隔（定时器）；
timer=setInterval（…，1000）；//您正在执行
clearInterval（timer）
在你声明
定时器之前
。初始化
定时器
为
var timer=null；
在你的函数之外。@Santi我想我已经按照你上面提到和编辑的那样做了，但是在重新测试后，它仍然在做同样的事情：/
var timer=setInterval
就是这样做的！天哪，我几乎把我的头发都拔出来了o弄清楚这一点。不知道为什么你的答案被否决了，这绝对是解决办法，也非常感谢stackoverflow就是这样工作的。人们认为答案太简单了，所以否决，或者他们误解了这个问题，或者他们因为某种原因感到不安，或者他们忘了喝咖啡，或者他们不喜欢我的喇叭。@epascarello很好回答。够有趣的是，你说“你基本上有这个”的片段实际上就是OP在我在评论中指出同样问题之前所做的。
var timer = null; 

function reset_timer(time){
    if (timer) clearInterval(timer);
    timer = setInterval( ... , 1000); //<--no more var
}