javascript - 范围问题？ Javascript 计时器不接受新的倒计时值

Question

我正在构建一个倒计时器，它在两个 session 值(主 session )之间交替 和休息时间。我一直通过以下方式将值存储在 DOM 显示中 count_down 函数。我没能解决的问题是最后 我无法让计时器识别要倒计时的新 current_time 值的 session ； 计时器继续保持先前的值并计数为负数 认识到新的值(value)。

我已确认新值已通过 console.log(current_time) 更新到 DOM 并且新的值(value)时间得到认可。这个新时间只是没有被纳入计数中 定时器。

我尝试通过 counting=null 和 counting=false 将计时器对象设置为 null。我 已尝试计时器对象的内部重置函数并尝试设置新计时器，但可能不正确。我认识到这是一个范围问题，因为计时器正在保留 从初始开始算起的倒计时值。我阅读了这些涉及范围的帖子； one , two , three ， 和 决定了one 尝试将所有计时功能保留在一个 单个计时对象。

显示计时器倒计时并过渡到第二个计时的最佳方式是什么 完成时的间隔？任何帮助将不胜感激。谢谢。

这是最后的努力:

//Timer object
function Current_Countdown(count_down){
  var timerObj;

  this.pause = function(){
    if (timerObj){
      clearInterval(timerObj);
    }
    return this;
  }

  this.stop = function(){
    if (timerObj){
      clearInterval(timerObj);
      timerObj = null;
    }
    return this;
  }

  this.start = function() {
    if (!timerObj){
      this.stop();
      timerObj = setInterval(count_down, 1000);
    } else {
      timerObj = setInterval(count_down, 1000);
    }
  }

  this.reset = function(){
    this.stop().start();
  }
}

function pause_count_down(){
  counting.pause();;
}

//calls the actual countdown function
function current_count_down(){
  if (!counting){
    counting = new Current_Countdown(count_down);
    counting.start();
  } else {
    counting.start();
  }
}

//performs the countdown and updates the DOM by sending values to display
function count_down(){
    curr_time = document.getElementById("current_time").value;
    var min_sec_split = curr_time.match(/:/);
    var min_sec_index = curr_time.indexOf(min_sec_split);
    var minutes = parseInt(curr_time.substring(min_sec_index, 0));
    var seconds = parseInt(curr_time.substring(min_sec_index + 1));
    console.log(minutes);
    console.log(seconds);

if (seconds == 0 && minutes == 0) {
  console.log("in final test");
  main_control();
}
if (seconds == 0) {
  seconds = 60;
  minutes -= 1;
}

seconds -= 1;

if (seconds < 10){
  seconds.toString();
  seconds = "0" + seconds;
}

if (seconds >= 0) {
  display_time(minutes, seconds);
}
};

//function to transition between session interval and break interval and back
function main_control(){
  var session = document.getElementById("session_number").value;
  var current_time = document.getElementById("current_time").value;
  var break_time = document.getElementById("break_time").value;
  var session_time = document.getElementById("interval_time").value;

  in_break = !in_break;
  console.log("in_break value: ", in_break);

  counting = false;

  if (in_break){
    console.log("passed display time");
    display_time(break_time, "00");

  } else {
    document.getElementById("session_number").value = parseInt(session) + 1;
    display_time(session_time, '00');
  } 
  current_count_down();
}

function display_time(minutes, seconds){
  var min = minutes.toString();
  var sec = seconds.toString();
  var curr_time = min + ":" + sec;
  console.log("current time is ", curr_time);
  document.getElementById("current_time").value = curr_time;
}

感谢您的时间和帮助。

Answer 1

计时器结束后，您必须退出 count_down 函数。

if (seconds == 0 && minutes == 0) {
  console.log("in final test");
  main_control();
  return; // This is the fix.
}

下面的代码是一个工作示例。我不只是使用你的代码，因为我觉得有太多不必要的代码。

var $currentTime = document.getElementById('current-time');
var $sessionNumber = document.getElementById('session-number');
var $currentTime = document.getElementById('current-time');
var $breakTime = document.getElementById('break-time');
var $sessionTime = document.getElementById('session-time');

var inBreak = false;
var timer = new Timer();

function Timer() {
  var timer;

  this.start = function() {
    this.stop();
    timer = setInterval(countdown, 1000);
  }

  this.stop = function() {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
  }
}

// Performs the countdown and updates the DOM by sending values to display
function countdown() {
  var currentTime = $currentTime.value.split(':');
  var minutes = parseInt(currentTime[0]);
  var seconds = parseInt(currentTime[1]);

  if (seconds == 0 && minutes == 0) {
    mainControl();
    return; // This line is your fix.
  }

  if (seconds == 0) {
    seconds = 60;
    minutes -= 1;
  }

  seconds -= 1;

  if (seconds < 10) {
    seconds = '0' + seconds;
  }

  if (seconds >= 0) {
    displayTime(minutes, seconds);
  }
};

// Function to transition between session interval and break interval and back
function mainControl() {
  var sessionNumber = $sessionNumber.value;
  var currentTime = $currentTime.value;
  var breakTime = $breakTime.value;
  var sessionTime = $sessionTime.value;

  inBreak = !inBreak;

  if (inBreak) {
    displayTime(breakTime, '00');

  } else {
    $sessionNumber.value = parseInt(sessionNumber) + 1;
    displayTime(sessionTime, '00');
  }

  timer.start();
}

function displayTime(minutes, seconds) {
  $currentTime.value = minutes + ':' + seconds;
}

document.getElementById('start').addEventListener('click', function() {
  mainControl();
});

<label>Session number: </label><input id="session-number" value="0"><br>
<label>Session timer: </label><input id="session-time" value="1"><br>
<label>Break timer: </label><input id="break-time" value="1"><br>
<label>Current time: </label><input id="current-time" value="00:10"><br>
<button id="start">Start</button>