ヘルプが必要です（JavaScript/jquery timer function）

Question

私はbtnをクリックすると2分のタイマーを持っています。 btnをクリックすると完璧に動作し、2分後にもう一度btnをクリックすると完全に動作します。

問題：ユーザーがbminを完了する前にbtnをクリックすると、タイマー自体が再準備され、タイマーが2回またはn回並列に開始されます。

すべてのクリックタイマーは最初から開始し、1つのタイマーしか実行しないようにする必要があります。

さらに明確にするために「実行コードスニペット」を参照してください。

$('.timer-btn').off('click').on('click', myfunction); 
 

 
      function myfunction(){ 
 
       var countdown = 2 * 60 * 1000; 
 
       var timerId = setInterval(function(){ 
 
       countdown -= 1000; 
 
       var min = Math.floor(countdown/(60 * 1000)); 
 
       //var sec = Math.floor(countdown - (min * 60 * 1000)); // wrong 
 
       var sec = Math.floor((countdown - (min * 60 * 1000))/1000); //correct 
 

 
       if (countdown <= 0) { 
 
       alert("30 min!"); 
 
       clearInterval(timerId); 
 
       //doSomething(); 
 
       } else { 
 
       $("#timerDiv").html(min + " : " + sec); 
 
       } 
 
       }, 1000); 
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 

 
<div id="timerDiv"> timer here </div> 
 
<div class="timer-btn"> Click Me </div>

Answer 1

あなたは新しいものを開始する前に、以前の間隔をクリアする必要があります。

var timerId; 

function myfunction(){ 
    var countdown = 2 * 60 * 1000; 
    timerId = clearInterval(timerId); 
    timerId = setInterval(function(){ 
     countdown -= 1000; 
     var min = Math.floor(countdown/(60 * 1000)); 
     //var sec = Math.floor(countdown - (min * 60 * 1000)); // wrong 
     var sec = Math.floor((countdown - (min * 60 * 1000))/1000); //correct 

     if (countdown <= 0) { 
      alert("30 min!"); 
      clearInterval(timerId); 
      //doSomething(); 
     } else { 
      $("#timerDiv").html(min + " : " + sec); 
     } 
    }, 1000); 
} 

$('.timer-btn').off('click').on('click', myfunction);