Jason Vertucio

You know me! ™

Javascript: Timer Class

Today, I needed a Timer class for the site I’m working on. The project that I’m doing — as usual — has gone through yet another change. One chart needed to animate differently. Since iPad slideshows are apparently my bag, baby, I couldn’t use my normal jQuery magic. So, I’ve been relying on 3D-accelerated -webkit- animation. Ah, Webkit. The only proprietary CSS-prefix I actually am forced to use. Anyway, since I could not control the animation using JavaScript, I was not able to control a counter ticking up one by one. It would just start with the zero, and end at the final number. Thanks to the cool people at dailycoding.com, I was able to easily set up a method to update the counter. No extra brain-power needed.

The way it looks is easy.

The code eventually looked like this. Discerning eyes may note differences between the one at Daily Coding and here. I made the constructor a little more useful, taking in the interval and callback. I also renamed it, because heaven forbid I actually keep the term Timer.

slide.css

  1. #line-graph {
  2.  background:url('img/chart-lines.png') no-repeat left top;
  3.  float:left;
  4.  height:348px;
  5.  width:0;
  6.  margin-top:76px;
  7.  margin-left:52px;
  8.  -webkit-transition:all ease-in-out 0.8s;
  9. }
  10. #line-graph.grow {
  11.   width:320px;
  12. }
timer.js
  1. var dailyCodingTimer = function(interval,callback) {
  2.     // Property: Frequency of elapse event of the timer in millisecond
  3.     if (typeof(interval) == 'undefined') thisObject.interval = 1000;
  4.         else this.interval = interval;
  5.     // Property: Whether the timer is enable or not
  6.     // Event: Timer tick
  7.     if (typeof(callback) == 'undefined') this.tick = null;
  8.   else this.tick = callback;
  9.     this.Tick;
  10.    
  11.     // Member variable: Hold interval id of the timer
  12.     var timerId = null;
  13.     // Member variable: Hold instance of this class
  14.     var thisObject;
  15.    
  16.     // Function: Start the timer
  17.     this.Start = function() {
  18.         this.enabled = true;
  19.  
  20.         thisObject = this;
  21.         if (thisObject.enabled) {
  22.             thisObject.timerId = setInterval(
  23.             function() {
  24.                 thisObject.Tick();
  25.             }, thisObject.Interval);
  26.         }
  27.     };
  28.    
  29.     // Function: Stops the timer
  30.     this.Stop = function()
  31.     {            
  32.         thisObject.enabled = false;
  33.         clearInterval(thisObject.timerId);
  34.     };
  35. };
slide.js
// Remember to include the timer Class from dailycoding
  1. animateChart : function() {
  2.   util.removeClass ( slide.element.lettersGained , 'hidden' );
  3.   setTimeout ( function() {
  4.     util.addClass ( slide.element.graphLine, 'grow');  
  5.     // Create Timer Instance and Set Timer
  6.     slide.timerObj = new DailyCodingTimer(10,slideUpdateNumbers);
  7.     slide.timerObj.Start();
  8.   } , 500 );
  9. },
  10. updateNumbers : function () {
  11.  var linePosition = slide.element.graphLine.clientWidth + 1;
  12.  var importantN = linePosition / ( maxWidth – importantMax );
  13.  var newNumber = importantN.toFixed(1);
  14.  slide.element.numberCode.innerHTML = newNumber;
  15.  
  16.  if ( i >= 320 ) this.Stop();
  17. }

(In the above code, the slide.elements refer to a getElementById item, and util.addClass and util.removeClass functions add and remove classes, and maxWidth and importantMax are defined elsewhere.)

Anyway, what happens in the above is that the line chart is masked off by the CSS. Once the animateChart method is called, the mask’s width grows and grows until the full line chart is revealed. The timer is used to call an update method on whatever numbers will be updated. By pointing object.tick to the function object you want to run, and setting the interval, it will run as often as you like. The version I used (such a fan of setTimeout I am) wasn’t producing the desired results, so thank you, Daily Coding, for the much-needed help.

Peruse Daily Coding for more great Javascript and jQuery tips. A note of warning, though. They call themselves “daily” coding, but it’s more like . . . whenever they remember to update the site.

(It’s not that daily!)

Comments are closed.