Creating Function wrapper for a group of funtions

[CES]

All,

I was wondering if someone could point me to a tutorial on creating & accessing functions from within a wrapper function.

I've created a group of functions related to a timer event. All works well until I try to enclose these functions into a class like structure ie:

function dTimer(div){
//Insert the Javascript Code Below
startTimer();
}

The problem seems to be with:
timerID = self.setTimeout("counterStatus()", delay);
But I can't figure out what the problem is. As always any guidance would be appreciated. Thanks in advance. - CES

--- Javascript ---

var secs = 5;
var timerID = null;
var timerRunning = false;
var delay = 1000;

function startTimer(){
stopTimer();
counterStatus();
}
function stopTimer(){
if(timerRunning != null){
clearTimeout(timerID);
timerRunning = false;
secs = 5;
}
}
function resetTimer(){
stopTimer();
}
function counterStatus(){
if (secs==0){
stopTimer();
// Due something(div);
}else{
secs = secs - 1;
timerRunning = true;
timerID = self.setTimeout("counterStatus()", delay);
}
}

---HTML---
<div id="test" style="width:100px; height:100px; background-color:Red;" onmouseout="startTimer('')" onmouseover="resetTimer('')">
</div>

 

[RobG]

All,

I was wondering if someone could point me to a tutorial on creating &
accessing functions from within a wrapper function.

I've created a group of functions related to a timer event. All works
well until I try to enclose these functions into a class like structure ie:

function dTimer(div){
//Insert the Javascript Code Below
startTimer();

If you want dTimer to be a constructor (I'd suggest changing the name to
'Timer'), then you need to use a pattern like:

function Timer() {
var secs = 5;
this.startTimer = function() { ... };
// ...
}

Then to create an instance of Timer, do:

var dTimer = new Timer();

Now you have an object dTimer that is an instance of Timer.

'this' is needed to create public members of dTimer that can be accessed
externally. Private members (like secs) don't need 'this' unless you
want to be able to modify them from external scripts.


Your function could look like:

function Timer(name,divID){

// Private variables
var secs = 5;
var timerID = null;
var timerRunning = false;
var delay = 1000;

// Public variables
// Should feature test for gEBI first, I'm lazy today...
this.div = document.getElementById(divID);

// Public methods
this.startTimer = function (){
this.stopTimer();
this.counterStatus();
}
this.stopTimer = function (){
if(timerRunning != null){
clearTimeout(timerID);
this.timerRunning = false;
secs = 5;
}
}
this.resetTimer = function (){
stopTimer();
}
this.counterStatus = function (){
if (secs==0){
this.stopTimer();
// Due something(div);
}else{
secs = secs - 1;
timerRunning = true;

// Just to show the timer is running
alert(self + ' : ' + secs + ' : ' + this.div);

timerID = self.setTimeout(name + ".counterStatus()",
delay);
}
}
}

window.onload = function() {
dTimer = new Timer('dTimer','test');
}

</script>

Note that anything you want to call using setTimeout must be public,
e.g. counterStatus.

And call it with:

onmouseout="dTimer.startTimer()"

If you want to create the timer with the mouseover/out, then use the
window.onload function as a guide to making a function to construct
dTimer using Timer and pass it a reference to the div.

}

The problem seems to be with:
timerID = self.setTimeout("counterStatus()", delay);
But I can't figure out what the problem is. As always any guidance would
be appreciated. Thanks in advance. - CES

--- Javascript ---

var secs = 5;
var timerID = null;
var timerRunning = false;
var delay = 1000;

function startTimer(){
stopTimer();
counterStatus();
}
function stopTimer(){
if(timerRunning != null){

Since you initialise timmerRunning with 'false', and subsequently either
give it a value or false, you can use:

if(timerRunning){


[...]

As always, there are many ways to do this, another pattern that you can
use is below. It creates a single object called 'Timer'. The top part
contains all the private members - variables and functions. The bottom
part (after the return) contains all the public and privileged members.

I've just exposed as public methods the methods that you called, they
simply call the private method (so they're privileged), but you may want
to move some of the functionality to the public methods - that's up to you.

<script type="text/javascript">

var Timer = (function(){

// Private variables
var secs = 5,
timerID = null,
timerRunning = false,
delay = 1000;

// Private functions
function startTimer(){
stopTimer();
counterStatus();
}
function stopTimer(){
if(timerRunning){
clearTimeout(timerID);
timerRunning = false;
secs = 5;
}
}
function resetTimer(){
stopTimer();
}
function counterStatus(){
if (secs==0){
stopTimer();
// Due something(div);
}else{
secs = secs - 1;
timerRunning = true;

// Just for debut to show the timer is running
alert(self + ' : ' + secs);

// setTimeout calls the public method Timer.counterStatus()
// which then calls the private method
timerID = self.setTimeout("Timer.counterStatus()", delay);
}
}

// Put public/privileged functions here
return ({
start : function() { startTimer(); },
reset : function() { resetTimer(); },
counterStatus : function(){counterStatus();}
});
})();

</script>