Preventing overflow in JS Timer

Question

I have done a timer from this question's most voted answer. Problem is, that when it reaches 0, it changes date to next day and starts a new 24 hour timer.

Tl;dr 00:00:00 -> 23:59:59 instead of staying 00:00:00 forever.

My current code:

function getTimeLeft() {
  var seconds_left = end_time - Math.floor(Date.now() / 1000);
  var time_left = new Date(seconds_left * 1000).toISOString().substr(11, 8);
  $('#test-time-left').text(time_left);
}
setInterval(getTimeLeft, 1000);

To keep 00:00:00, I thought of 2 ways of solving it.

First (and imho better) would be giving setInterval(getTimeLeft, 1000); in while loop with condition seconds_left >= 0. But I have few problems with that.

I have no idea how to pass variable outside of function.
I don't know if preventing setInterval will do anything, but I might as well just set interval to 0 (ergo turn it off).

Second approach would be simply doing while inside of function:

while( seconds_left >= 0){
      var time_left = new Date(seconds_left * 1000).toISOString().substr(11, 8);
}

Problems:

Waste resources, because JS script is still being done

@Edit Final result:

function getTimeLeft() {
  var seconds_left = end_time - Math.floor(Date.now() / 1000);
  if (seconds_left <= 0)
  {
    seconds_left = 0;
    clearInterval(timer);
  }
  var time_left = new Date(seconds_left * 1000).toISOString().substr(11, 8);
  $('#test-time-left').text(time_left);
}
var timer = setInterval(getTimeLeft, 1000);

I also set seconds_left to 0 just in case script miss 0 second frame (for example user closes browser while countdown happen).

score 1 · Accepted Answer · answered Feb 17 '17 at 16:59

1

Assuming you want to stop the timer when seconds_left equals 0, you could simply clear the interval:

function getTimeLeft() {
  var seconds_left = end_time - Math.floor(Date.now() / 1000);
  var time_left = new Date(seconds_left * 1000).toISOString().substr(11, 8);
  if(seconds_left === 0) {
    clearInterval(timer);  // clear the interval
  }
  $('#test-time-left').text(time_left);
}

var timer = setInterval(getTimeLeft, 1000);  //save the timer in a variable

Note that your idea for using a while loop will not work:

while( seconds_left >= 0){
  var time_left = new Date(seconds_left * 1000).toISOString().substr(11, 8);
}

JavaScript is single-threaded, which means the interval code will not run at all while your while loop is running, therefore creating an infinite loop (and possibly crashing your browser).

answered Feb 17 '17 at 16:59

Rick Hitchcock

35,202
5
48
79

Is equal value and equal type necessary? I wanted to use <= instead of that. Just in case user close browser and javascript does not run and it miss 0 second frame. Please refer to edit in main post – Feb 17 '17 at 17:36
If the user closes the browser, the interval will automatically be canceled. Should be fine to use `<=` instead of `===`. – Rick Hitchcock Feb 17 '17 at 18:05
Interval does, but Date changes, but anyway everything works fine. Thanks. – Feb 17 '17 at 22:54

score 0 · Answer 2 · answered Feb 17 '17 at 17:04

I concur with everything Rick Hithcock said. Here is an example based on your code that sets the timer 10 seconds from now and then counts down.

var end_time = new Date();
end_time.setSeconds(end_time.getSeconds() + 10);

function getTimeLeft() {
    var now = new Date();
    var seconds_left = (end_time - now) / 1000;
    if (seconds_left <= 1) {
        clearInterval(timerID);
    }
    var time_left = new Date(seconds_left * 1000).toISOString().substr(11, 8);
    $('#test-time-left').text(time_left);
}
timerID = setInterval(getTimeLeft, 1000);

Preventing overflow in JS Timer

2 Answers2