番茄钟计时器：变量值变为'NaN' [英] Pomodoro Timer: Variable value goes to 'NaN'

问题描述

我正在尝试建立一个番茄钟，如 http://codepen.io/GeoffStorbeck/full / RPbGxZ / 。秒的值随机变为NaN，然后​​在开始'break'后恢复正常。

I'm trying to build a Pomodoro clock like http://codepen.io/GeoffStorbeck/full/RPbGxZ/. The value of seconds goes to NaN randomly and then returns to normal after starting '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);
});

这是codepen的链接
http://codepen.io/ibrahimjarif/pen/wMKJWN

Here's the link to the codepen http://codepen.io/ibrahimjarif/pen/wMKJWN

我如何修复NaN问题？
有没有更好的方法来实现这个？

How do I fix the NaN issue? And is there any better way to implement this?

推荐答案

代码 $（' #circle a'）。触发器（click）; //启动break的计时器以递归方式调用最初执行的函数。此调用启动新计时器，而原始计时器正在进行中。

The code $('#circle a').trigger("click"); //Start timer for break recursively calls the function that was executing originally. This call starts a new timer while the original one was in progress.

原始计时器的秒值变为 NaN 当新计时器执行时。由于两个计时器， second 有两个值。原始计时器中秒的值导致 NaN 的无法解释的外观。

The seconds value for the original timer went to NaN when the new timer was executing. There were two values for second due to two timers. The value of seconds in the original timer caused the unexplained appearance of NaN.

注意：两个计时器一直在同时运行。

NOTE: Both the timers were running simultaneously all the time.

最简单的解决方法是在开始新计时器之前停止当前计时器。

The simplest fix was to stop the current timer before starting a new one.

这是更新后的代码

 $('#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);
});

这篇关于番茄钟计时器：变量值变为'NaN'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！