I have a method that uses the setTimeout
function and makes a call to another method. On initial load method 2 works fine. However, after the timeout, I get an error that says method2
is undefined. What am I doing wrong here?
ex:
test.prototype.method = function()
{
//method2 returns image based on the id passed
this.method2('useSomeElement').src = "http://www.some.url";
timeDelay = window.setTimeout(this.method, 5000);
};
test.prototype.method2 = function(name) {
for (var i = 0; i < document.images.length; i++) {
if (document.images[i].id.indexOf(name) > 1) {
return document.images[i];
}
}
};
The issue is that setTimeout()
causes javascript to use the global scope. Essentially, you're calling the method()
class, but not from this
. Instead you're just telling setTimeout
to use the function method
, with no particular scope.
To fix this you can wrap the function call in another function call that references the correct variables. It will look something like this:
test.protoype.method = function()
{
var that = this;
//method2 returns image based on the id passed
this.method2('useSomeElement').src = "http://www.some.url";
var callMethod = function()
{
that.method();
}
timeDelay = window.setTimeout(callMethod, 5000);
};
that
can be this
because callMethod()
is within method's scope.
This problem becomes more complex when you need to pass parameters to the setTimeout
method, as IE doesn't support more than two parameters to setTimeout
. In that case you'll need to read up on closures.
Also, as a sidenote, you're setting yourself up for an infinite loop, since method()
always calls method()
.
A more elegant option is to append .bind(this)
to the end of your function. E.g.:
setTimeout(function() {
this.foo();
}.bind(this), 1000);
// ^^^^^^^^^^^ <- fix context
So the answer to the OP's question could be:
test.prototype.method = function()
{
//method2 returns image based on the id passed
this.method2('useSomeElement').src = "http://www.some.url";
timeDelay = window.setTimeout(this.method.bind(this), 5000);
// ^^^^^^^^^^^ <- fix context
};
the this
you used in setTimeOut
is scoping via itself. Create a var "foo = this;"
inside your test.prototype.method
function and use foo
instead.
in es6 you can do it like this
window.setTimeout(() => {
this.foo();
}, 1000);
I get an error that says method2 is undefined
Yes, when you slice off this.method
from its owner and pass the function alone to setTimeout
, you lose the association that sets this
, so this
in method()
is equal to the global object window
.
See this answer for an explanation of the surprising way this
actually works in JavaScript.
©2020 All rights reserved.