Implement a Timer in JS ES6+

This page is more like an exercise on coding in Javascript. You should be able to learn about the bind functionality and how to deal with a timer via the setInterval function.

The codebase is fully written using the syntax provided since 2015 with the ECMA script norms. You can browse the new features by following the comparison here.

Application requirements

Take a look at the demo first !

The application is very simple, it displays a timer on a html page starting from 10 and decreasing every second.

You stop the timer by a click on the button.

The Timer

The timer is implemented using the setInterval method offered on the Window and Worker interfaces (see resources at the bottom to learn more about the interfaces).

We use the bind method to actually link the execution of the function being called ( tick) with the instance of the Timer. See the This problem for more details.

We apply the same particularity for the click event handler.

Checkout the html file which simply loads the JS code when the page has loaded all elements :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Timer in JS</title>
</head>

<body>
    <h1>Timer</h1>

    <div id="timer"></div>
    <hr>
    <button id="clear">STOP</button>
    <script src="Timer.js"></script>

</body>
</html>

Now the Timer script which embeds an Object and its instantiation at the end. 

class Timer {

    constructor ()
    {
        this.min = 10;
        this.init();          
    }

    init() {
        this.timer = setInterval( this.tick.bind(this), 1000 );
        document.getElementById('clear').addEventListener("click", this.clearMe.bind(this), false); 
    }

    clearMe(event) {
        clearInterval(this.timer);
        console.log('clearing interval with event : ', event.type);
    }

    tick() {

        console.log('down 1"');
        document.getElementById('timer').innerHTML = this.min--;
    }
}

/**********************
 * MAIN PROGRAM ENTRY *
 **********************/

new Timer();

The constructor initializes the timer at 10 but we could also use a parameter to let the user decide about the value.

Upon instantiation, the timer starts because of the call to the setInterval method.

Finally an event handling is attached to the button and once clicked, the interval delay is cleared and the timer stops.


There is nothing fancy here, instead of the bind method, we could have used anonymous functions or arrow ones but for better clarity (in my opinion – clean code matters), its use was quite useful.

I hope you enjoyed the exercise, you may use the code and alter it for your own needs. Post a comment if anything needs to be explained more deeply.

More Javascript resources :

Event types

Bind method

And for more details about the mixin above setInterval method : Window Or Worker global scope

 

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Want more information?

Related links will be displayed within articles for you to pick up another good spot to get more details about software development, deployment & monitoring.

Stay tuned by following us on Youtube.

%d bloggers like this: