Scope Issue? Javascript timer won't accept new countdown value

Question

I am building a countdown timer that alternates between two session values, a main session and a break session. I have been storing the values in the DOM display through the count_down function. The problem that I have not been able to solve is that at the end of the session I can not get the timer to recognize a new current_time value to count down against; the timer continues to hold the previous value and counts into the negative numbers instead of recognizing the new value.

I have confirmed that the new value is updated to the DOM through console.log(current_time) and that new value time is recognized. This new time is just not incorporated into the count by the timer.

I have tried setting the timer obejct to null through counting=null and counting=false. I have tried the timer object's internal reset function and have tried to set a new timer, but probably not correctly. I recognize that this is a scope problem since the timer is retaining the countdown values from the initial start. I read these postings that addressed scope; one, two, three, and decided on this one to try and keep all of the timing functions in a single timing object.

What is the best way to display a countdown from a timer and transition to a second timing interval on completion? Any help would be greatly appreciated. Thank you.

Here is the last effort:

//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;
}

Thank you for your time and your help.

score 2 · Accepted Answer · answered Mar 27 '17 at 17:44

You have to break out of the count_down function after the timer finished.

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

Below code is a working example. I have not just used your code as I felt that there are too many unnecessary code.

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>

Excellent! Thank you very much for the help, I appreciate the working example. — Cameron, Mar 27 '17 at 19:40

Scope Issue? Javascript timer won't accept new countdown value

1 Answers1