Countdown Timer Objects - Javascript

Question

I would like to create a simple timer in Javascript that counts down from a given time until it hits 0. I found this tutorial which worked perfectly. My problem is that I need to place multiple timers on the same page. This tutorial obviously won't do that because it uses global variables (I'm new to JS/Programming so I might not be using the right terms). I tried to re-create the same thing only creating each timer as it's own Object so that they don't interfere with eachother. This is what I have.

function taskTimer(name, startTime) {
  this.timer = name;
  this.totalSeconds = startTime;
  this.tick = function() {
    if (this.totalSeconds <= 0) {
      return;
    }
    this.totalSeconds -= 1;
    this.updateTimer();
    // window.setTimeout("this.tick()", 1000);
  };
  this.updateTimer = function(){
    this.seconds = this.totalSeconds;

    this.hours = Math.floor(this.seconds / 3600);
    this.seconds -= this.hours * (3600);

    this.minutes = Math.floor(this.seconds / 60);
    this.seconds -= this.minutes * (60);

    this.timeString = this.leadingZero(this.hours) + ":" + this.leadingZero(this.minutes) + ":" + this.leadingZero(this.seconds);
    return this.timeString;
  };
  this.leadingZero = function(time){
    return (time < 10) ? "0" + time : + time;
  };
}
var testTimer = new taskTimer("timer", 30);
testTimer.tick();

I created one at the end there. Running testTimer.updateTimer(); returns 00:00:30 which is correct, but running testTimer.tick(); returns no value. There is obviously something wrong with that part of the code I just can't figure it out.

Answer 1

You've got a few problems.

1. You're calling updateTimer() inside of your tick method, so it won't ever reach outside of there unless you return it.
2. With your current setup, you'd have to call tick manually every time you wanted to update the clock, and if you don't do that precisely every one second the timer will be inaccurate.
3. To go with #2, you shouldn't decrement totalSeconds like you are because it isn't guaranteed that it will be exactly one second between triggers of your timeout. Use dates instead.

Here's what I would do: http://jsfiddle.net/R4hnE/3/

// I added optional callbacks. This could be setup better, but the details of that are negligible. 
function TaskTimer(name, durationInSeconds, onEnd, onTick) {
    var endTime,
        self = this, // store a reference to this since the context of window.setTimeout is always window
        running = false;
    this.name = name;
    this.totalSeconds = durationInSeconds;

    var go = (function tick() {
        var now = new Date().getTime();
        if (now >= endTime) {
            if (typeof onEnd === "function") onEnd.call(self);
            return;
        }
        self.totalSeconds = Math.round((endTime - now) / 1000); // update totalSeconds placeholder
        if (typeof onTick === "function") onTick.call(self);
        window.setTimeout(tick, 1000 / 12); // you can increase the denominator for greater accuracy. 
    });

    // this is an instance method to start the timer
    this.start = function() {
        if (running) return; // prevent multiple calls to start

        running = true;
        endTime = new Date().getTime() + durationInSeconds * 1000; // this is when the timer should be done (with current functionality. If you want the ability to pause the timer, the logic would need to be updated)
        go();
    };
}
// no reason to make this an instance method :)
TaskTimer.prototype.toTimeString = function() {
    var hrs = Math.floor(this.totalSeconds / 60 / 60),
        min = Math.floor(this.totalSeconds / 60 - hrs * 60),
        sec = this.totalSeconds % 60;

    return [hrs.padLeft("0", 2), min.padLeft("0", 2), sec.padLeft("0", 2)].join(" : ");
};

var task = new TaskTimer("task1", 30, function() {
    document.body.innerHTML = this.toTimeString();
    alert('done');
}, function() {
    document.body.innerHTML = this.toTimeString();
});

Answer 2

I always have problems with this and in one instance, within the function, I had to redefine it:

this.tick = function() {
  self=this;
  if (self.totalSeconds <= 0) {
    return;
  }
  self.totalSeconds -= 1;
  self.updateTimer();
   // window.setTimeout("self.tick()", 1000);
};

Here is another post about that: var self = this?

Answer 3

My version, you can see at: http://fiddle.jshell.net/hmariod/N7haK/4/

var tmArray = new Array();
var timerRef, timerId=0;


function newTimer(){
    try{
        if(tmArray.length > 4) throw "Too much timers";
        var countDown = parseInt(document.getElementById("tCountown").value,10);
        if(isNaN(countDown)) throw "tCountown is NaN";
        var tmName = document.getElementById("tName").value;
        var nt = new taskTimer(++timerId, tmName, countDown);
        createTmElement(timerId, tmName);
        tmArray.push(nt);
        if(!timerRef) timerRef = setInterval(timerFn, 1000);
        showTimers();
    }catch(er){
        alert("newTimer:" + er);
    }
}

function taskTimer(id, name, tCountown) {
    this.id = id;
    this.tName = name;
    this.tCountown = tCountown;
}


function timerFn(){
    try{
        var i;
        killTimer = true;
        for(i = 0; i < tmArray.length; i++){
           tmArray[i].tCountown--;
            if(tmArray[i].tCountown < 0){
                tmArray[i].tCountown = 0;
            }else{
                killTimer = false;
            }
        }
        if(killTimer) clearInterval(timerRef);
        showTimers();
    }catch(er){
        clearInterval(timerRef);
        aler("timerFn: " + er);
    }
}