variable set to true in setTimeout is always false?

Question

Ok, I think I have a this context issue. I am trying to make, only on mousedown and the timer is reset on mouseup, a timer set in motion so that a boolean flag turns true after 5 seconds. If it is true when the timer is reset (on mouseup), a function this.triggerRoomChange() is triggered.

Here's what I have (its node):

   clearRoomChange(){

    this.readyToChangeRooms = true;
    console.log('READY');
  };

  onMouseDown()
  {

    this.mousedownTimeout = setTimeout(this.clearRoomChange, 5000);
    this.mouseDown++;
  }
  onMouseUp()
  {
    clearTimeout(this.mousedownTimeout);

    console.log(this.readyToChangeRooms);
    if(this.readyToChangeRooms)
    {
      this.triggerRoomChange();
      this.readyToChangeRooms = false;
    }
    this.mouseDown--;
  }

The print READY fires after the 5 seconds and the setTimeout appears to be cleared, however the variable (when printed on MouseUp) is always false. I clearly set it to true in this.clearRoomChange

Whats going on?

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) — Heretic Monkey, Dec 04 '19 at 20:20
Related reading: https://stackoverflow.com/questions/111102/how-do-javascript-closures-work — freedomn-m, Dec 04 '19 at 21:49

score 1 · Accepted Answer · answered Dec 04 '19 at 20:19

1

The timeout changes the scope. So you need to use bind to maintain scope

this.mousedownTimeout = setTimeout(this.clearRoomChange.bind(this), 5000);

answered Dec 04 '19 at 20:19

epascarello

204,599
20
195
236

variable set to true in setTimeout is always false?

1 Answers1