Starten Sie ein neues Intervall, wenn eine Taste erneut gedrückt wird

Question

Meine Abfrage ist ziemlich einfach. Ich konnte ein Countdown-Skript erstellen. Wenn Sie auf eine Schaltfläche klicken, beginnt der Countdown. wenn wir aber weiterhin auf den Knopf klicken, fügt er einfach einen weiteren Countdown hinzu und vermasselt auch den ursprünglichen. Ich habe versucht, das Intervall zu löschen, aber nicht sicher, was es nicht laufen lässt. Wenn ich Start drücke, beginnt der Countdown, aber wenn Sie erneut darauf klicken, können Sie es selbst ausprobieren. Ich bin auch nicht in der Lage herauszufinden, wie eine Stopp-Taste den Intervall-Timer beenden kann und ich habe versucht cleartInterval(); auch.

$("#startClock").click(function(){ 
 
    var counter = document.getElementById('minutes').value; 
 
    setInterval(function() { 
 
    counter--; 
 
     if (counter >= 0) { 
 
     span = document.getElementById("count"); 
 
     span.innerHTML = counter; 
 
     } 
 
     if (counter === 0) { 
 
     span = document.getElementById("count"); 
 
     span.innerHTML = ""; 
 
     } 
 
    }, 1000); 
 

 

 
});

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script> 
 
Minutes 
 
<select id="minutes"> 
 
    <option value="60">1</option> 
 
    <option value="120">2</option> 
 
    <option value="180">3</option> 
 
    <option value="240">4</option> 
 
    <option value="300">5</option> 
 
    </select> 
 
<button id=startClock >Start</button> 
 
<button id=stopClock >Stop</button> <br/> 
 
<div id="count"></div>

Answer 1

Try this:

var clickTimer; 

$("#startClock").click(function(){ 
    if (clickTimer) { 
     clearInterval(clickTimer); 
    } 
    var counter = document.getElementById('minutes').value; 
    clickTimer = setInterval(function() { 
    counter--; 
     if (counter >= 0) { 
     span = document.getElementById("count"); 
     span.innerHTML = counter; 
     } 
     if (counter === 0) { 
     span = document.getElementById("count"); 
     span.innerHTML = ""; 
     } 
    }, 1000); 


}); 

EDIT

$("#stopClock").click(function(){ 
if (clickTimer) { 
    clearInterval(clickTimer); 
    clickTimer = undefined; 
} 
});