Creating Multiple Objects using the same functions

Question

I have a timer that counts down to 0. It works fine with one, but I want to create a second timer on the same page. I can create the second timer, but it won't countdown and the first one counts down twice as fast. How would I do this. Here is my code

<script>
var Timer;
var TotalSeconds;
function CreateTimer(TimerID, Time) {
 Timer = document.getElementById(TimerID);
 TotalSeconds = Time;
 UpdateTimer()
 window.setTimeout("Tick()", 1000);
}
function Tick() {
 if(TotalSeconds <= 0) {
 TotalSeconds = 0;
 return;
 }
 TotalSeconds -= 1;
 UpdateTimer()
 window.setTimeout("Tick()", 1000);
}
function UpdateTimer() {
 var Seconds = TotalSeconds;
 var Days = Math.floor(Seconds / 86400);
 Seconds -= Days * 86400;
 var Hours = Math.floor(Seconds / 3600);
 Seconds -= Hours * (3600);
 var Minutes = Math.floor(Seconds / 60);
 Seconds -= Minutes * (60);
 var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds)
 Timer.innerHTML = TimeStr;
}
function LeadingZero(Time) {
 return(Time < 10) ? "0" + Time : +Time;
}
</script>
<?php 
$tomorrow = mktime(0, 0, 0, date("m") , date("d")+1, date("Y"));
$currentTime = time();
$today = $tomorrow - $currentTime;
?>
<div id="timer"></div>
<script type="text/javascript">
 var today = <?php echo $today; ?>
 window.onload = CreateTimer("timer", today);
</script>
<div id="timer2"></div>
<script type="text/javascript">
 var today = <?php echo $today; ?>
 window.onload = CreateTimer("timer2", today);
</script>

• Amy: .setTimeout() should be passed a function handler, not a string "Tick()". You don't want to make setTimeout run that with eval(), easier to just pass it the handler. If you have var tick = function() {....}; Then you can do this: window.setTimeout(tick, 1000);
• RobG: You need to hold the Timer and TotalSeconds variables in a closure so they are private to each timer. Incidentally, it's a convention that variable names starting with a capital letter are reserved for constructors.
• RobG: Incidentally, this has nothing to do with jQuery.

Answer 1

The reason it's ticking twice as fast is because both the countdowns are sharing the same TotalSeconds variable.

Answer 2

Here's an example of how to make an independent timer. Parameters are passed to start, they might be better passed to getTimer or to an init function. There is also call a stop method to stop the timer at any time, clear and restart methods could be easily added.

function getTimer() {
 var el, currentNum, lag, timerRef;
 function start(id, startNum, delay) {
 el = document.getElementById(id);
 currentNum = startNum;
 lag = delay;
 run();
 }
 function run() {
 if (timerRef) stop();
 el.innerHTML = currentNum;
 if (currentNum--) {
 timerRef = setTimeout(run, lag);
 }
 }
 function stop() {
 if (timerRef) clearTimeout(timerRef);
 }
 return {
 start: start,
 run: run, 
 stop: stop
 };
}
window.onload = function() {
 var t0 = getTimer();
 t0.start('d0', 10, 1000);
 var t1 = getTimer();
 t1.start('d1', 20, 500);
 var t2 = getTimer();
 t2.start('d2', 40, 250);
}

HTML:

<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>

• vinylDeveloper: Thanks man, That works like a charm... I've been trying to learn OOP for a couple years, I guess I should break down and read a book or something rather than try to pick it up on the fly.. This layout makes perfect sense though. Thanks