setTimeout scope issue

Question

I have a setTimeout defined inside of a function that controls the player's respawn (i am creating a game):

var player = {
    ...
    death:(function() {
        this.alive = false;
        Console.log("death!");
        var timer3 = setTimeout((function() {
            this.alive = true;
            Console.log("alive!");
        }),3000);
    }),
    ...
}

When it executes, I read in the console, "death!" and 3 seconds later "alive!". However, alive is never really set back to true, because if i write player.alive in the console, it returns false. How come i can see "alive!" but the variable is never set back to true?

in this scope this is the anonymous function passed to the setTimeout, you need to assign this to some other variable and check it later — haynar
– haynar, Commented Jul 30, 2012 at 1:21

zostay · Accepted Answer · 2019-10-10 02:23:22Z

50

You have to be careful with this. You need to assign your this in the outer scope to a variable. The this keyword always refers to the this of the current scope, which changes any time you wrap something in function() { ... }.

var thing = this;
thing.alive = false;
Console.log("death!");
var timer3 = setTimeout((function() {
    thing.alive = true;
    Console.log("alive!");
}),3000);

This should give you better success.

Update 2019-10-09: The original answer is true, but another option is now available for recent versions of JavaScript. Instead of using function, you can use an arrow function instead, which does not modify this:

this.alive = false;
Console.log("death!");
var timer3 = setTimeout(() => {
    this.alive = true;
    Console.log("alive!");
}), 3000);

This is supported from ES6 forward, which is part of all current browsers but IE (of course), I think. If you are using a modern framework to build your project via Babel or whatever, the framework should make sure this works as expected everywhere.

edited Oct 10, 2019 at 2:23

answered Jul 30, 2012 at 1:21

zostay

4,03523 silver badges30 bronze badges

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

3 Comments

undefined Over a year ago

For extra credit, read up on javascript's function .call() and .apply() methods, which help to understand how this works in javascript, and can come in handy when you need to define the function somewhere other than where you're passing it. jQuery's .proxy() and Prototype's .bind() provide neat wrappers to this functionality.

nnnnnn Over a year ago

Further to what @BrianMortenson said, JS has its own .bind() method (introduced in version 1.8.5, so not supported in older IE). Actually one of the examples on that MDN page is for use with setTimeout().

Umit Over a year ago

Further to what @nnnnnn said, if you are using ES6 you can use arrowed functions. () => setTimeout( ()=> this.alive = true, 3000)

2 revs, 2 users 67% user1106925 · Accepted Answer · 2016-11-04 21:04:42Z

It's because this in the setTimeout handler is referring to window, which is presumably not the same value as referenced by this outside the handler.

You can cache the outer value, and use it inside...

var self = this;

var timer3 = setTimeout((function() {
    self.alive = true;
    Console.log("alive!");
}),3000);

...or you can use ES5 Function.prototype.bind...

var timer3 = setTimeout((function() {
    this.alive = true;
    Console.log("alive!");
}.bind(this)),3000);

...though if you're supporting legacy implementations, you'll need to add a shim to Function.prototype.

MDN Function.prototype.bind patch

...or if you're working in an ES6 environment...

var timer3 = setTimeout(()=>{
    this.alive = true;
    Console.log("alive!");
},3000);

Because there's no binding of this in Arrow functions.

Kokodoko · Accepted Answer · 2016-02-22 14:45:56Z

10

Just in case anyone reads this, the new javascript syntax allows you to bind a scope to a function with "bind":

window.setTimeout(this.doSomething.bind(this), 1000);

answered Feb 22, 2016 at 14:45

Kokodoko

28.3k37 gold badges133 silver badges208 bronze badges

1 Comment

Niall Jackson Over a year ago

Unfortunately binding directly to the function like this doesn't appear to work (at least, not in Chrome 60). It seems that you have to run it through an anonymous function first, as in the "community wiki" ES5 example above.

James M · Accepted Answer · 2017-08-22 12:57:16Z

5

Probably because this isn't preserved in the timeout callback. Try:

var that = this;
...
var timer3 = setTimeout(function() {
    that.alive = true;
    ...

Update (2017) - or use a lambda function, which will implicitly capture this:

var timer3 = setTimeout(() => {
    this.alive = true;
    ...

edited Aug 22, 2017 at 12:57

answered Jul 30, 2012 at 1:21

James M

16.8k3 gold badges50 silver badges57 bronze badges

2 Comments

Kokodoko Over a year ago

In my humble opinion the that = this solution should not be used anymore because it only adds to the confusion caused by the this keyword. Preferably you should use arrow notation setInterval( () => {}) or else use bind() to fix javascript's scoping issues.

James M Over a year ago

@Kokodoko I agree! This was answered in 2012. I'll update the answer.

mfakhrusy · Accepted Answer · 2018-03-29 12:50:26Z

5

With ES6 function syntax, the scope for 'this' doesn't change inside setTimeout:

var timer3 = setTimeout((() => {
    this.alive = true;
    console.log("alive!");
}), 3000);

edited Mar 29, 2018 at 12:50

mfakhrusy

1,2081 gold badge12 silver badges20 bronze badges

answered Aug 3, 2017 at 21:20

Samantha Guergenenov

511 silver badge3 bronze badges

Collectives™ on Stack Overflow

setTimeout scope issue

5 Answers 5

3 Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related