番茄钟计时器:变量值变为'NaN'

时间:2015-12-17 17:40:44

标签: javascript jquery

我正在尝试制作像http://codepen.io/GeoffStorbeck/full/RPbGxZ/这样的番茄钟。秒值随机变为NaN,然后​​在开始'break'后恢复正常。

VirtualHost configuration:
*:80                   is a NameVirtualHost
         default server localhost (/etc/apache2/sites-enabled/000-default.conf:1)
         port 80 namevhost localhost (/etc/apache2/sites-enabled/000-default.conf:1)
         port 80 namevhost atarica.com.br (/etc/apache2/sites-enabled/atarica.com.br.conf:1)
                 alias www.atarica.com.br
         port 80 namevhost wiki.atarica.com.br (/etc/apache2/sites-enabled/atarica.com.br.conf:13)
         port 80 namevhost atarica.com.br (/etc/apache2/sites-enabled/fabrincantes.com.conf:1)
                 alias www.fabrincantes.com
         port 80 namevhost yellowtown.org (/etc/apache2/sites-enabled/yellowtown.org.conf:1)
                 alias www.yellowtown.org
         port 80 namevhost wiki.yellowtown.org (/etc/apache2/sites-enabled/yellowtown.org.conf:35)
ServerRoot: "/etc/apache2"
Main DocumentRoot: "/var/www"
Main ErrorLog: "/var/log/apache2/error.log"
Mutex default: dir="/var/lock/apache2" mechanism=fcntl 
Mutex mpm-accept: using_defaults
Mutex watchdog-callback: using_defaults
PidFile: "/var/run/apache2/apache2.pid"
Define: DUMP_VHOSTS
Define: DUMP_RUN_CFG
User: name="www-data" id=33 not_used
Group: name="www-data" id=33 not_used

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

如何解决NaN问题? 有没有更好的方法来实现这个?

1 个答案:

答案 0 :(得分:1)

代码$('#circle a').trigger("click"); //Start timer for break以递归方式调用最初执行的函数。此调用启动新计时器,而原始计时器正在进行中。

当新计时器执行时,原始计时器的seconds值转到NaN。由于有两个定时器,second有两个值。原始计时器中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);
});
相关问题