Click here to Skip to main content
15,861,168 members
Articles / Programming Languages / Javascript
Tip/Trick

JavaScript Lap Timer Class

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
24 Aug 2012CPOL3 min read 14.1K   84   6   1
A Utility JavaScript class to provide a Lap Timer like functionality, in a reusable fashion

Introduction

The LapTimer class discussed in this tip is a simple but object oriented implementation of a Timer functionality, which facilitates adding intermediate time-stamp values (typically knows as laps) along with a custom comment for each such lap. Imagine an Athlete running in Olympic Games (thought of it just like that) and we need to track the timing of each of his laps. This LapTimer class does precisely the same.

Background

To be very frank, this tip was not planned at all. Neither was this code. It has been years since I have written any code. C# a little but JavaScript? Not for many many years. So bear with me if you find any obvious mistakes.

When helping out some developers on my team, I came across a requirement to use a Lap Timer like functionality to record time after specific steps. This was mainly for debugging performance issues on the client side scripts.

Since the team was busy in some other burning issues as well, I thought it might just help them (and ourselves) out. I tried searching for a ready-made code for this but I could not find anything like that (at least not in the form I have published here.) If you do come across another solution for the same problem, please point it out here.

The LapTimer Class

If you have already guessed the methods of this class, I would say I have succeeded in keeping it simple. The class has straightforward methods like start(), stop(), reset() as you would imagine with any timer type of implementation.

Again for simplicity (and for some tweaks, which I'll explain later), I have provided a default global instance of the LapTimer class named "defaultLapTimer". This instance is expected to be used directly for all simple and typical lap timer needs.

Usage

Sample usage is provided in the code snippet below:

JavaScript
//Use the Default Timer available globally across pages on the site

// Invoke the start() method to start the LapTimer. Internally first calls reset()
defaultLapTimer.start();

// Use addLap method to register a Lap / Pass comment.
// Current date & Time will be registered automatically.
defaultLapTimer.addLap("Pass 1");
// Do Job 1

defaultLapTimer.addLap("Pass 2");
// Do Job 2

defaultLapTimer.addLap("Pass 3");
// Do Job 3

defaultLapTimer.addLap("Pass 4");
// Do Job 4

// Use the stop method to stop the timer.
defaultLapTimer.stop();

// getAllLaps returns a string representations of all
// Lap Records in a single string value. This does not include Duration.
alert(defaultLapTimer.getAllLaps());

// Use the TotalDuration property to get the total duration of all laps in milliseconds
alert(defaultLapTimer.TotalDuration);

In addition, if really needed, multiple additional instances of the LapTimer class can be created and used across pages.

JavaScript
// If needed additional instances of the LapTimer can be used separately if needed.
var lapTimer2 = new LapTimer();
lapTimer2.addLap("Comment 1");
// Do Job 1

lapTimer2.addLap("Comment 2");
// Do Job 2

lapTimer2.addLap("Comment 3");
// Do Job 3

alert(lapTimer2.getAllLaps()); 

Use the reset() method to clear all these counters and start using the same lapTimer instance again.

Outputs

For simplicity and as per our current needs, the string equivalent of each lap's information is captured and stored in the LapTimer class instances. This information is returned by the getAllLaps() method call. The method gets this information from the member named "LapsInfoStrings" which happens to be an array. One can easily use it as any other class member, i.e. defaultTimer.LapsInfoStrings.

If this string representation is not useful, and there is more control needed using the direct time intervals of the lap times, then another property named "LapTimes" can be used. This property is an array of Date() instances, each representing the lap recorded by the method call addLap().

Here's what you can expect in the outputs.

JavaScript
alert(defaultLapTimer.getAllLaps()); 

This produces the following output:

Image 1

JavaScript
alert(defaultLapTimer.TotalDuration); 

This produces the following output: 

LapTimer - TotalDuration Output

The Code

The code provided with this tip contains just two files. 

  1. LapTimerClass.js - The file contains the source of code class LapTimer and some other related utility JavaScript methods used by the class.
  2. TimerTestPage.html - This is just a plain HTML page showing the usage and working of the LapTimer class.

History

I'll keep you guys updated if I make any changes to this over time. Please do point out any simpler alternative or interesting solution approaches.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect Hewlett Packard
India India
Atul Kale is a Senior Solution Architect with 14+ years of experience in IT industry. He is proficient in Architecting & Leading Product & Project based enterprise solutions for Windows/Web based systems, on Microsoft(r) platform, Microsoft(r) SQL Server, Dynamics, SharePoint and various other Microsoft(r) products and technologies.
He showcases his expertise in Service Oriented, Distributed Enterprise Architecture Analysis and Planning, Solutioning, Estimations, Evangelizing Best Practices/Methodologies.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Christian Amado24-Aug-12 16:47
professionalChristian Amado24-Aug-12 16:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.