Simple Timer Program

Question

I have built a timer program in JavaScript. It decrements one counter every second, and if that counter is at zero, it decrements another counter, and sets the first counter to 59. If the second counter now is below zero, then it stops the timer. Would it be more efficient to store the total seconds left, and calculate the minutes on the fly? Is there other stuff I can improve on?

var timerRun; // Variable for holding the interval
          var timeLeft; //Array; index 0 keeps track of the minutes, and index 1 keeps track of the seconds
          var timerRunning = false; //Boolean to keep track of whether the timer is running
          function tick() {
              // Subtract 1 second
              timeLeft[1] -= 1;
              if (timeLeft[1] < 0) { // Decrement the minute if neccessary
                  timeLeft[0] -= 1;
                  timeLeft[1] = 59; 
              }
              if (timeLeft[0] < 0) { // Check if the timer is done
                  clearInterval(timerRun);
                  alert("Timer is done!");
                  timerRunning = false;
                  document.getElementById("timer").innerHTML = "Simple Timer";
              }
              if (timeLeft[1] < 10) { // Display the seconds as a two-digit number
                  timeLeft[1] = "0" + timeLeft[1];
              }
              document.getElementById("timer").innerHTML = timeLeft.join(":");
              if (timerRunning == false) {
                  document.getElementById("timer").innerHTML = "Simple Timer";
              }
          }
          function time() { // Restart timer
                clearInterval(timerRun)
                timerRun = setInterval(tick, 1000);
                // Create array
                timeLeft = document.getElementById("time").value.split(":");
                timerRunning = true;
          }

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
      <h1 id="timer">Simple Timer</h1>
      <input type="text" id="time" value="15:00">
      <button type="button"  onclick="time();" id="start">Start</button>

  </body>
</html>

K.H. · Accepted Answer · 2020-03-14 07:56:26Z

You are basically trying to show timer, which can be up to hours. Best way to calculate and represent that for your usecase is definitely by just one variable, which holds all the seconds. That way your code handling current state is a lot simpler - you have just one variable, you decrease it every second until it's done. You will have more work displaying that value as you will have to calculate minutes and seconds, but that's fine.
Definitely extract that to function - you pass number of seconds and you get string representing it. You may even consider using library for that or a number formatter. There are plenty ways how to do that: https://stackoverflow.com/questions/3733227/javascript-seconds-to-minutes-and-seconds
Your variable timerRunning is redundant. In your code same meaning has expression timeLeft[1] < 0 && timeLeft[0] < 0. You really don't want redundancy, that leads to bugs. Again you can extract to function isTimerRunning if you need it. But again if you end up with only one timeLeft variable with representing all in seconds, you just need !timeLeft to check, if timer is over.
Probably not a problem in your case, but keep in mind, that setInterval is not very reliable time-wise. It pings "around" every second, but it jumps a lot. More on this here: https://stackoverflow.com/questions/29971898/how-to-create-an-accurate-timer-in-javascript

Edit:

In this line function time() { // Restart timer you poorly name your function and then you have to comment it to describe what it does. Why not just name function restartTimer and you can delete comment?

MarkLor · Accepted Answer · 2020-03-13 19:28:57Z

In large part I agree with K.H. so functions will be a much shorter:

function tick() {
    timeLeft -= 1;
    if (timeLeft < 0) { // Check if the timer is done
        clearInterval(timerRun);
        alert("Timer is done!");
        document.getElementById("timer").innerHTML = "Simple Timer";
    } else {
        timeDisplay = Math.round( timeLeft / 60 ) + ":" + ( "0" + timeLeft % 60 ).slice(-2);
        document.getElementById("timer").innerHTML = timeDisplay;
    }
}

function time() { // Restart timer
    clearInterval(timerRun)
    timerRun = setInterval(tick, 1000);
    // Create array
    timeLeft = document.getElementById("time").value.split(":");
    timeLeft = timeLeft[0]*60 + parseInt(timeLeft[1]); // change array to seconds
}

Nice, that also shows poor naming of time function in original question. I updated my answer :-) — K.H.
– K.H., Commented Mar 14, 2020 at 7:57

Stack Exchange Network

Simple Timer Program

2 Answers 2

You must log in to answer this question.

Hot Network Questions

Simple Timer Program

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions