Question

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

我面临的问题是它在页面加载时完美运行，但是当用户点击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>

Answer 1

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

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
}

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

1 个答案: