javascript - 即使使用 clearInterval，setInterval 也会保持堆叠

Question

我正在制作一个简单的打卡/打卡计时器。

我面临的问题是它在页面加载时完美运行，但是当用户单击 end_work_btn 然后单击 begin_work_btn 时，计时器有点堆叠初始值和从 0 开始的新值，因此它试图显示两者。每次点击按钮时，它都会不断堆叠，直到页面重置时重新加载。

我读了很多书并认为 clearInterval(timer) 可以做到这一点，但假设我没有正确使用它或者我对这里的问题不了解。

这是我到目前为止得到的

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

Answer 1

很简单，范围不同。在您的代码中，您有两个名为 timer 的变量。每次调用 reset_timer 时都会创建函数内部的那个。外面的人永远不会得到值(value)。因此，每次调用该函数时，都会创建另一个计时器实例。

var timer = null; //<-- outside 

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

你基本上有这个:

function reset_timer(time){
    var timer;
    clearInterval(timer);
    timer = setInterval( ... , 1000);
}

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

var timer = null; 

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