Click here to Skip to main content
13,199,852 members (62,850 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


6 bookmarked
Posted 23 Aug 2012

JavaScript Lap Timer Class

, 24 Aug 2012
Rate this:
Please Sign up or sign in to vote.
A Utility JavaScript class to provide a Lap Timer like functionality, in a reusable fashion


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.


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.


Sample usage is provided in the code snippet below:

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

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

// 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.

// getAllLaps returns a string representations of all
// Lap Records in a single string value. This does not include Duration.

// Use the TotalDuration property to get the total duration of all laps in milliseconds

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

// 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


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


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.


This produces the following output:


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.


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.


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


About the Author

Atul Kale
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.

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
Christian Amado24-Aug-12 16:47
memberChristian 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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171020.1 | Last Updated 24 Aug 2012
Article Copyright 2012 by Atul Kale
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid