javascript计时器过早重置(不工作)

时间:2016-04-09 09:03:27

标签: javascript timer

//此计时器在达到1分钟后会重新恢复到2:00。此外,我没有得到一个通知,说明在适当的时间。有人可以请更正代码。停止/恢复计时器按钮也必须保持正常运行。

var isRunning = false;
var ticker; //this will hold our setTimeout
var seconds,
  minutes;

function countdown(mins, secs) {
  //i made these global, so we can restart the timer later
  seconds = secs || 60; //if user put in a number of minutes, use that. Otherwise, use 60
  minutes = mins;
	console.log('time stuff',mins,secs,minutes,seconds)
  function tick() {
    var counter = document.getElementById("timer");
    var current_minutes = mins - 1
    seconds--;
    counter.innerHTML =
      current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
    if (seconds < 1 && minutes) {
			//seconds reached 0, and still minutes left;
      seconds=60;
      minutes--;
    }
    if ((seconds > 0 || minutes > 0) && isRunning) {
      ticker = setTimeout(tick, 1000);
    } else if(isRunning){
    	console.log(seconds,minutes,isRunning)
      alert('Time\'s up, brah!')
    }
  }
  tick();
}

function timeToggle() {
	isRunning = !isRunning; //if it's false, set it true. If it's true, set it false.
  if (!isRunning) {
    clearTimeout(ticker); //or whatever else you set the initial timeOut to.
  } else {
    //not running! and time is defined;
    var sec = seconds||60;
    console.log('def!',minutes, sec)
    countdown(minutes, sec);
    
  } 
  
}
isRunning = true;
countdown(2);
<div id="timer">2:00</div>
<button onclick="timeToggle()">Stop time</button>

1 个答案:

答案 0 :(得分:0)

你的逻辑存在一个小缺陷。

在倒计时初始化期间

seconds = secs || 60;

如果您没有初始化秒数,那么有效地将60秒添加到您想要的时间。见:

function countdownInit(mins, secs) {
  seconds = secs || 60;
  minutes = mins;
  console.log(mins + 'min ' + seconds + 'sec');
}

countdownInit(1, 30) // ok
// 1min 30sec

countdownInit(1) // not ok
// 1min 60sec
// thats 2 minutes

这里的第二个问题是你使用等于current_minutes的var minutes - 1来显示时间。所以你没有展示真正的反击。

修复方法如下:

function countdown(mins, secs) {
    seconds = secs;
    minutes = mins;
    // if secs is 0 or uninitialized we set seconds to 60 and decrement the minutes
    if(!secs) {
      minutes--;
      seconds = 60;
    }

    function tick() {
        var counter = document.getElementById("timer");
        seconds--;
        // we use minutes instead of current_minutes in order to show what's really in our variables
        counter.innerHTML =
          minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);

        // rest of code
    }
    // rest of code
}

我尽量保留尽可能多的代码。