.call or .apply with setTimeout

djeyewater · February 9th, 2008, 10:00 AM

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 Code:

<!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 · February 9th, 2008, 10:27 AM

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

Code:

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

djeyewater · February 9th, 2008, 03:00 PM

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 · February 10th, 2008, 01:09 AM

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:

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 · February 10th, 2008, 10:33 AM

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 · February 29th, 2008, 01:41 PM

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.