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>

.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); — Amy
– Amy, Commented Mar 7, 2013 at 0:12
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
– RobG, Commented Mar 7, 2013 at 0:27

Amy · Accepted Answer · 2013-03-07 00:14:57Z

2

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

answered Mar 7, 2013 at 0:14

Amy

7,5262 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RobG · Accepted Answer · 2013-03-07 01:27:18Z

1

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>

edited Mar 7, 2013 at 1:27

answered Mar 7, 2013 at 1:21

RobG

148k32 gold badges180 silver badges216 bronze badges

1 Comment

vinylDeveloper Over a year ago

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

Collectives™ on Stack Overflow

Creating Multiple Objects using the same functions

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related