Object Oriented Programming with JavaScript : Timer Class

TutArchive — Tue, 22 Sep 2009 02:06:23 +0000

JavaScript with Oops is not much used by developers while creating application however we can make our life easy if we use JavaScript with Oops.

Let's started object oriented programming in JavaScript by taking example of a Timer class, similar to the Timer control in windows application.
Create Class

Create the class Timer. Below code shows how to declare the class

// Declaring class "Timer"
var Timer = function()
{
    // ....
    // Class body
    // ....
}

Add Public Properties

To add public properties to the class we use this keyword as shown below

// Declaring class "Timer"
var Timer = function()
{
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
}

You can see that we have created 2 properties (Interval and Enable) of Timer class and assigned default values to them.
Add Events (If any)

Now we might want to add events to the class in case we need. For Timer class we need "Tick" event which will be fired every after "Interval". Event are added the same way as the public properties.

// Declaring class "Timer"
var Timer = function()
{
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
 
    // Event: Timer tick
    this.Tick;
}

Add Private Member Variables
We need 2 private variable in the class to hold the timer Id and the class instance. The private variable are added using 'var' keyword.

// Declaring class "Timer"
var Timer = function()
{
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
 
    // Event: Timer tick
    this.Tick;
 
    // Member variable: Hold interval id of the timer
    var timerId = 0;
 
    // Member variable: Hold instance of this class
    var thisObject;
}

Add Functions
Public functions are also added the same way as public properties using this keyword. We need 2 function in the timer, first "Start" to start the timer and second "Stop" to stop the timer.

// Declaring class "Timer"
var Timer = function()
{
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
 
    // Event: Timer tick
    this.Tick;
 
    // Member variable: Hold interval id of the timer
    var timerId = 0;
 
    // Member variable: Hold instance of this class
    var thisObject;
 
    // Function: Start the timer
    this.Start = function()
    {
        this.Enable = new Boolean(true);
 
        thisObject = this;
        if (thisObject.Enable)
        {
            thisObject.timerId = setInterval(
            function()
            {
                thisObject.Tick();
            }, thisObject.Interval);
        }
    };
 
    // Function: Stops the timer
    this.Stop = function()
    {
        thisObject.Enable = new Boolean(false);
        clearInterval(thisObject.timerId);
    };
 
};

You can see I have incorporated the timer functionality using the setInterval function of the JavaScript. Our class is ready for use now.

Using the Class
To use the class first create the instance of Timer.

var obj = new Timer();

Now assign the value to its properties as needed.

obj.Interval = 300;

Attach handler to the events

obj.Tick = timer_tick;
 
function timer_tick()
{
    // Do something..
}

Now call the "Start" function to start the timer

obj.Start();

To stop the timer anytime in between just call the "Stop" function.

obj.Stop();

Source: Dailycoding

Tutorials Archive » OOP

Object Oriented Programming with JavaScript : Timer Class