JavaScript library recommendation #2: tock

This is the second in the series of JavaScript library recommendations. I advocate for JavaScript because it is accessible and ubiquitous. In this article, I introduce a precise, lightweight, and simple JavaScript timer library tock.

---

Why tock?

The first question in mind is, why use tock at all, because there is already setTimeout and setInterval? For example, if we want to countdown 10 seconds, couldn't we just write something like:

setTimeout(function(){
  alert('10 seconds up!');
}, 10000);

Yes, if you do not mind minor inaccuracy. But if you need precise timing, especially if you need to keep time for a long period, these native JavaScript functions won't suffice. The reason is, as this stackoverflow thread has shown, these native functions are not very accurate. The exact reasons are beyond the scope of this article, but if you want to do more research, I suggest starting here.

And here comes tock. A simple library with no dependency, a straightforward api, basic start, stop, pause, lap, reset functionalities to add to your projects, and, most importantly, a self-adjusting timing function that keep timing accurate during a long period of time. For a proof of concept, see their official website.

---

Getting started

You could install tock in bower:

bower install tock

Or in npm:

npm install tocktimer

Or, include it in your browser by downloading the file from github repository and including it with a script tag:

<script src="path/to/tock.js"></script>

And then, you could set up a simple timer interface with control buttons:

<button id="start">start timer</button>
<button id="pause">pause timer</button>
<button id="reset">reset timer</button>
<input id="clock" value="00:00"/>

---

Set up a simple timer

To create a new instance of tock is really straightforward, like so:

var t = new Tock();

But to have more control over tock's performance, we need to pass in some options:

// countdown determines whether the timer will be a countdown timer
// interval determines how often in milliseconds the clock will update
// callback references a function that will be called every time the timer update
var t = new Tock({
  countdown:false,
  interval:1000,
  callback:updateClock
});

The updateClock function will be called every time the tock timer update, and we will create this function later.

The controls of the tock instance is also simple. They are usually bind to event listeners:

// first create reference to the timer and control elements
var clock = document.getElementById('clock'),
    start = document.getElementById('start'),
    pause = document.getElementById('pause'),
    reset = document.getElementById('reset');

// then add event listeners to them
start.addEventListener('click',function(){
  // start with the current time in the timer
  // by passing the current time to the start function
  var current = clock.value;
  t.start(current);
},false);

pause.addEventListener('click',function(){
  t.pause();
},false);

reset.addEventListener('click',function(){
  t.reset();
  // reset the clock display as well
  clock.value = '00:00.000';
},false);

// the callback function is created here
function updateClock(){
  // we use t.lap() to get the current time in milliseconds
  // then we use the msToTime method to convert current time from milliseconds to MM:SS time string format
  clock.value = t.msToTime(t.lap());
}

And here we go! We have created a simple timer. Please see this jsfiddle for a live example of what we just created.

---

Want to do more?

You could explore the github repository for the documentation of other useful methods in tock, such as controls and conversion methods.

Overall, this lightweight library is the only one, after some soul searching on github and google, that I liked among many others. It is precise, has no dependency, and very simple. It does not get dragged down by complex functionalities, but has all the essential ones.

---

If you liked this tutorial/recommendation, please upvote and follow. If you have any questions, please leave a comment. If you want to request for JavaScript tutorials on anything JavaScript, please also comment below.

---

• YouTube channel: gameplay, theories, and tech