Pomodoro Timer：変数値が 'NaN'になる

Question

私はhttp://codepen.io/GeoffStorbeck/full/RPbGxZ/のようなPomodoroの時計を作ろうとしています。秒の値はNaNに無作為に行き、「break」を開始した後に正常に戻ります。

$('#circle a').click(function() { 
    var timer = $('.time > span').html(); 
    timer = timer.split(':'); 
    var minutes = timer[0]; //Value of minutes 
    var seconds = timer[1]; //Value of seconds 

    var settimer = setInterval(function() { 
    seconds -= 1; 
    console.log(seconds); 
    if (seconds < 0 && minutes != 0) { 
     minutes -= 1; 
     minutes = String(minutes); 
     seconds = 59; 
    } else if (seconds < 10 && seconds.length != 2) 
     seconds = '0' + seconds; 
    if (minutes < 10 && minutes.length < 2) 
     minutes = '0' + minutes; 

    $('.time > span').html(minutes + ':' + seconds); 

    //Start break when session is completed 
    if (minutes == 0 && seconds == 0) { 
     $('.upper').find('h1').text('BREAK'); 
     var time = $('#break').find('span').text(); 
     $('.time > span').html('0' + time + ':00'); 
     $('#circle a').trigger("click"); //Start timer for break 
    } 
    }, 1000); 
}); 

は、ここで私がNaNの問題を修正するにはどうすればよいcodepen http://codepen.io/ibrahimjarif/pen/wMKJWN

へのリンクですか？ これを実装する方法はありますか？

Answer 1

コード$('#circle a').trigger("click"); //Start timer for breakは、元々実行していた関数を再帰的に呼び出します。この呼び出しは、元のタイマーが進行中に新しいタイマーを開始します。

元のタイマーの値はNaNになりました。新しいタイマーが実行されたときに値がsecondsになりました。 2つのタイマのためにsecondの2つの値がありました。元のタイマーのsecondsという値は、説明できない外観のNaNを発生させました。

注：両方のタイマは常に同時に実行されていました。

最も簡単な修正は、新しいタイマーを開始する前に、現在のタイマーを停止することでした。

ここで更新されたコード

$('#circle a').click(function() { 
    var timer = $('.time > span').html().split(':');; 
    var minutes = Number(timer[0]), 
    seconds = Number(timer[1]); 

    var settimer = setInterval(function() { 
    seconds -= 1; 
    if (seconds < 0 && minutes != 0) { 
     minutes -= 1; 
     seconds = 59; 
    } else if (seconds < 10 && seconds.length != 2) 
     seconds = '0' + seconds; 
    if (minutes < 10 && minutes.toString().length < 2) 
     minutes = '0' + minutes; 

    $('.time > span').html(minutes + ':' + seconds); 

    if (minutes == 0 && seconds == 0) { 
     clearInterval(settimer); //Stop the current timer 
     var upper_text = $('.upper').find('h1'); 
     var time; 
     if (upper_text.text() == 'BREAK') { 
     upper_text.text('Session'); 
     time = $('#session').find('span').text(); 
     } else { 
     upper_text.text('BREAK'); 
     time = $('#break').find('span').text(); 
     } 
     $('.time > span').html(time + ':00'); 
     $('#circle a').trigger("click"); //Start new timer 
    } 
    }, 1000); 
});