Passing variables from within object into setTimeout

Question

I'm having some interesting issues with passing in variables from within an object into setTimeout. At first, I tried putting the function I was calling from setTimeout on my object so that I wouldn't have to pass any variables into it (I was hoping it could access my object by itself). That didn't work, apparently because the function somehow became global when I called it from setTimeout, and no longer had access to my object's variables.

This was my next attempt, but it doesn't work either:

function MyObj() {
    this.foo = 10;
    this.bar = 20;
    this.duration = 1000;

    setTimeout(function(){
        AnotherFunction(this.foo, this.bar)
    }, this.duration);
}

So, how exactly can I pass in a variable into setTimeout from within an object? No, AnotherFunction won't be able to directly access MyObj for various unrelated reasons, so that's out of the question too.

what do you hope to achieve here? what's AnotherFunction called for? by convention, constructors start with Capitalized letters. is AnotherFunction another constructor? or just a function to be called? — Joseph
– Joseph, Commented Mar 17, 2012 at 23:21
It's very complex, that's why I didn't copy my actual code in here. Basically, 'for real', it's a function called ClearCharacter that clears an ASCII character off the page by calling another object's Draw() function, which overwrites MyObj's Draw() function, which is another function I didn't include here because it was irrelevant but that draws an ASCII character on the page via setting the innerHTML value of a <p> element. Like I said, complex and very irrelevant. So yeah, AnotherFunction is just a function to be called. =) — Elliot Bonneville
– Elliot Bonneville, Commented Mar 17, 2012 at 23:23

Adam · Accepted Answer · 2012-03-17 23:17:06Z

7

I think the problem is that when your function executes, this is no longer bound to MyObj. You could try

function MyObj() {
    var that = this;
    this.foo = 10;
    this.foo = 20;
    this.duration = 1000;

    setTimeout(function(){AnotherFunction(that.foo, that.bar)}, this.duration);
}

Or I do have one more idea should that not work.

answered Mar 17, 2012 at 23:17

Adam

5,1616 gold badges34 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Adam Over a year ago

@Elliot Cool. Just for completeness, I think your other option would be a closure or IIFE (stackoverflow.com/questions/8228281/…)

Elliot Bonneville Over a year ago

IIFE: that's wicked cool. Thanks again! I'll be able to accept your answer in about a minute.

Adam Over a year ago

Confusing as hell when you first see it though!

Travis J Over a year ago

I have seen this situation arise a decent amount of times where the this operator becomes out of scope in dynamic functions. Adam's approach is the same solution I have seen where a variable holds the pointer to the this operator which was intended to be used.

Ray Toal Over a year ago

If you need help considering why it works, consider this (no pun intended): The JS expression this is not a variable, it is a special expression whose meaning depends on context. So for the code in your question, by the time your callback is called this means something different than it did within MyObj. In Adam's answer, he locked the value of the original object within the variable that whose value was the same when the callback ran. TL;DR: In JS this is not a variable!! It's meaning depends on context.

|

Collectives™ on Stack Overflow

Passing variables from within object into setTimeout

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related