OO Problem 1

dougalim · Mar 11, 2008

I'm trying to encapsulate code in an object but I'm having problems with setTimeout and setInterval calling functions within an object.

Heres a simple example that attempts to increment a number displayed in the browser:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script>

function abc() {

	this.total = 0;

	this.addOne = function() {
	
		this.total++;
		document.getElementById('abc').innerHTML = this.total;
	
	}
	
	document.getElementById('abc').innerHTML = this.total;
	
	setTimeout(this.addOne, 1000);
	//setTimeout("this.addOne()", 1000);
	
}

function init() {
	new abc();
}

</script>

</head>

<body onload="init()">
<div id="abc"></div>
</body>
</html>

The inner function of the object abc is called but it appears to lose the value of this.total and sets the value to NaN.

Is this possible to do? This is a much simpler example than the one I am trying to figure out which involves similar calls to objects within objects.

Thanks

trollacious · Mar 11, 2008

You're not assigning the new object to a variable.

Lee

dougalim · Mar 11, 2008

I've tried it with and with out assigning the object to a variable. Same result. It isn't absolutely necessary to assign an instance of an object to a variable.

trollacious · Mar 11, 2008

I'd guess that the object is deleted once the function is ended.

You gotta show your code if you want us to understand what you've tried, too. Copy and paste it in, don't retype it.

Lee

dougalim · Mar 11, 2008

Ok, here's an alternative version yeilding the same result

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script>

function abc() {

	this.total = 0;

	this.addOne = function() {
	
		this.total += 1;
		document.getElementById('abc').innerHTML = this.total;
	
	}
	
	document.getElementById('abc').innerHTML = this.total;
	
	//setTimeout(this.addOne, 1000);
	//setTimeout("this.addOne()", 1000);
	
}

function init() {
	var a = new abc();
	setTimeout(a.addOne, 1000);
}

</script>

</head>

<body onload="init()">
<div id="abc"></div>
</body>
</html>

trollacious · Mar 11, 2008

I guessed as much. The variable is local to the function, and when the function terminates, the object is destroyed. Try this:

Code:

var a;
function init() {
    a = new abc();
    setTimeout(a.addOne, 1000);
}

Lee

dougalim · Mar 11, 2008

That doesn't make any difference. Have you tried it yourself - I'd like to know it does the same thing for you.

kaht · Mar 11, 2008

The problem is that inside of an inner function, the reference to the object is lost. For this reason, you have to make a variable local to the object that points to the object. The inner function can then freely use that reference.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script>

function abc() {

    this.total = 0;
    [!]var that = this;[/!]

    this.addOne = function() {
    
        [!]that[/!].total += 1;
        document.getElementById('abc').innerHTML = [!]that[/!].total;
    
    }
    
    document.getElementById('abc').innerHTML = this.total;
    
    //setTimeout(this.addOne, 1000);
    //setTimeout("that.addOne()", 1000);
    
}

function init() {
    var a = new abc();
    setTimeout(a.addOne, 1000);
}

</script>

</head>

<body onload="init()">
<div id="abc"></div>
</body>
</html>

You can read up more about it here:

http://www.crockford.com/javascript/private.html

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

dougalim · Mar 11, 2008

Thank you. This has been bugging me for a long time now and your solution opens up a lot of possibilities for me.

Once again, thank you.

kaht · Mar 11, 2008

Once again, thank you.

Thank me, as in "Thank kaht for this valuable post!"? If only there were an easy way to express thanks... like a link to click. That would be cool.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

OO Problem 1

dougalim

Programmer

trollacious

Programmer

dougalim

Programmer

trollacious

Programmer

dougalim

Programmer

trollacious

Programmer

dougalim

Programmer

kaht

Programmer

dougalim

Programmer

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor