.call or .apply with setTimeout

djeyewater · #1 (**permalink**) Feb 9th, 2008, 13:00

How do I get the below timeout to work? After reading http://www.west-wind.com/WebLog/posts/5033.aspx I think I need to use .call or .apply within the timeout, but I can't figure out how to use them?

HTML: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function hello()
{
    this.i=0;
    this.bye();
    
    alert(this.i);
}
hello.prototype.bye = function()
    {this.i++;}
hello.prototype.timeOut = function()
{setTimeout(function(){hello.call(this.seti, [20]);}, 1000);}
hello.prototype.seti = function(l)
{
    this.l=l;
    this.i=l;
    this.bye();
}
</script>
</head>

<body onload="jim = new hello()">
<a href="javascript: jim">jim</a><br>
<a href="javascript: jim.seti(10)">seti(10)</a><br>
<a href="javascript: alert(jim.i)">alert(jim.i)</a><br>
<a href="javascript: alert(jim.l)">alert(jim.l)</a><br>
<a href="javascript: jim.timeOut()">jim.timeOut()</a>
</body>
</html>

Rakuli · #2 (**permalink**) Feb 9th, 2008, 13:27

The first argument of setTimeout is an evaluated string so you just need to place quotes around it.

Code: Select all

setTimeout('hello.call(this.seti, [20])', 1000);

djeyewater · #3 (**permalink**) Feb 9th, 2008, 18:00

Thanks for the pointer, but I still can't get it to work using that code. Also, I tried removing the reference to this.bye() from seti(), and still got the error from the timeout "this.bye is not a function", so I think its trying to create a new hello object but with 'this' pointing to the window object.

Rakuli · #4 (**permalink**) Feb 10th, 2008, 04:09

That's right, you can't use the this keyword because it is not available in the scope from where you're calling it.

You can look at naming the obj so it can be aware within the function:

Code: Select all

function hello(objName)
{
    this.i=0;
    this.Oname = objName;
    this.bye();
    
    alert(this.i);
}
hello.prototype.bye = function()
    {this.i++;}
hello.prototype.timeOut = function()
{setTimeout(this.Oname + '.this.seti()', [20]);}, 1000);}
hello.prototype.seti = function(l)
{
    this.l=l;
    this.i=l;
    this.bye();
}

Then when you create the object, pass the name of the variable to the obj.

var jim = new hello('jim');

djeyewater · #5 (**permalink**) Feb 10th, 2008, 13:33

Thank you so much for that, works great!

Edit: Mark thread as solved isn't appearing in the Thread Tools for me, so if a Mod can mark this thread as solved, it would be appreciated.

NeilM · #6 (**permalink**) Feb 29th, 2008, 16:41

You can also accomplish this with a "closure" variable pointing to "this"

var self = this;
setTimeout(function() {self.seti(); }, 1000);

This way is much less limiting then working with strings. If you need to pass parameters to your function, look into the "hitch" method which uses call and apply and allows for arguments.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Problem with setTimeout in method	Emancip8	JavaScript Forum	1	Apr 22nd, 2008 16:30
Apply transition to a div	blkskull	JavaScript Forum	0	Feb 26th, 2008 14:00
setTimeout won't work	cheataweb	JavaScript Forum	1	Dec 27th, 2006 00:26
Beginning to Apply my skillz...	courtjester	Classic ASP	7	Apr 5th, 2004 10:18

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
.call or .apply with setTimeout