ボタンをもう一度押すと新しい間隔が始まります

Question

私の質問はかなり簡単です。私はカウントダウンスクリプトを作ることができたので、ボタンをクリックするとカウントダウンが始まります。しかし、ボタンをクリックし続けるとカウントダウンが追加され、オリジナルのものも混乱します。私は間隔をクリアしようとしましたが、何が動かないのかはわかりません。スタートを押すとカウントダウンが始まりますが、もう一度クリックすると、自分で試してみることができます。私はまた、どのように停止ボタンがインターバルタイマーを終了することができ、私はcleartInterval（）を試みたか分かりません。同じように。

$("#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

このお試しください： "私は）（cleartIntervalを試してみました。"

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; 
} 
});