46

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];
        }
    }
};
Improve this question
7
  • Just to make sure: is "finction" just a typo in the question or is it in your code also? Commented Feb 26, 2009 at 16:21
  • please add the definition and scope of method2 Commented Feb 26, 2009 at 16:22
  • 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]; } } }; Hope this helps Commented Feb 26, 2009 at 16:27
  • Thanks crescentfresh, sorry, didn't intend to delete that 'T' Commented Feb 26, 2009 at 16:39
  • 1
    Possible duplicate of How to access the correct `this` inside a callback? Commented Dec 20, 2018 at 23:03

5 Answers 5

Reset to default
61

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
    };
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

51

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().

Improve this answer

2 Comments

Hey, This works in mozilla bu not in ie! any clue? also images do not loop, stops once it reaches the last image
What an excellent article on closures with practical examples in your link! Thanks!
11

The this you used in setTimeout is scoping via itself. Create a var _this = this; inside your test.prototype.method function and use _this instead.

Improve this answer

1 Comment

What does "scoping via itself" mean?
8

in es6 you can do it like this 

window.setTimeout(() => {
    this.foo();
}, 1000);
Improve this answer

1 Comment

great simple answer
1

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.