setInterval stapelt auch mit clearInterval

Question

Ich mache einen einfachen Punch-In/Punch-Out-Timer.

Problem im Blick ist, dass es funktioniert perfekt beim Laden der Seite, aber wenn der Benutzer klickt end_work_btn dann begin_work_btn, stapelt der Timer irgendwie den Anfangswert und der neue beginnt von 0, so versucht es beide anzuzeigen. Es stapelt jedes Mal, wenn es auf die Schaltflächen klickt, bis die Seite neu geladen wird, wenn es zurückgesetzt wird.

Ich habe eine Menge gelesen und dachte klarInterval (Timer) würde es tun, aber nicht gehen, so vorausgesetzt, dass ich es nicht richtig benutze oder ich bin weit weg vom Ball auf was ist hier falsch.

Hier ist, was ich habe bisher

<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

Ziemlich einfach, Umfang ist anders. In Ihrem Code haben Sie zwei Variablen namens timer. Derjenige innerhalb der Funktion wird jedes Mal erstellt, wenn reset_timer aufgerufen wird. Eine Außenseite erhält niemals einen Wert. Jedes Mal, wenn Sie die Funktion aufrufen, wird eine weitere Instanz des Timers erstellt.

var timer = null; //<-- outside 

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

Sie haben im Grunde diese:

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

Es sollte nicht mit var definiert werden. Auf diese Weise aktualisiert es die Variablen, die bei jedem Aufruf außerhalb der Funktion definiert sind.

var timer = null; 

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