Can't use setTimeout to undo boolean

Question

In my Javascript code I am trying to set up this code

    if(this.boolean == true) {
        setTimeout(function(){ this.boolean = false; }, 2000);

    }

But for some reason it won't work, the boolean just remains true. How can I fix this/what can I do instead? The setTimeout works with other lines of code but weirdly not this one.

check out https://stackoverflow.com/questions/3630054/how-do-i-pass-the-this-context-to-a-function — Andrew Lohr, Feb 14 '20 at 16:49
you are losing the scope of `this`, try using arrow function: — Christian Carrillo, Feb 14 '20 at 16:49
Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Igor, Feb 14 '20 at 16:49

score 2 · Accepted Answer · answered Feb 14 '20 at 16:48

2

this behaves in a special way in JavaScript.

Change

setTimeout(function(){ this.boolean = false; }, 2000);

to

setTimeout(() => { this.boolean = false; }, 2000);

and the this keyword will be interpreted block-scoped.

answered Feb 14 '20 at 16:48

messerbill

4,582
1
19
33

score 1 · Answer 2 · answered Feb 14 '20 at 16:48

It's because of "this" - you can use a closure to do this:

var x = this;
var onTimeout = function(){
  x.boolean = false;
}

if(this.boolean == true) {
       setTimeout(onTimeout, 2000);
}

"this" is not what you think it is inside the setTimeout function:

setTimeout and "this" in JavaScript

If you have ES6 available, arrow functions use their lexical scope for this

var onTimeout = () => this.boolean = false; 
setTimeout(onTimeout , 2000);

More about that here:

https://medium.com/tfogo/advantages-and-pitfalls-of-arrow-functions-a16f0835799e

score 0 · Answer 3 · answered Feb 14 '20 at 16:50

If you are not using arrow function, the this variable will be the one from setTimeout and not your main class because of its scope.

The following should resolve the issue.

    if(this.boolean == true) {
        setTimeout(() => { this.boolean = false; }, 2000);

    }

score 0 · Answer 4 · answered Feb 14 '20 at 16:50

Functions have their own this, so this.boolean inside of function implies that you are trying to change the property boolean of the function itself. On the other hand, if you use arrow functions, you can avoid that because arrow functions don't have their own this.

setTimeout(() => { this.boolean = false }, 2000)

score 0 · Answer 5 · answered Feb 14 '20 at 17:29

The scope of "this" is changed in your function inside the setTimeout.

You could use the arrow function like other commenters have said.

Or, you can set a var as this, and then use that var in the functions inside the SetTimeout.

var coolThis = this;
if(coolThis.boolean == true) {
    setTimeout(function(){ coolThis.boolean = false; }, 2000);
}

Can't use setTimeout to undo boolean

5 Answers5