Trouble referencing object from within function - adobe animate canvas

Question

I am having trouble getting a function to reference a movie clip on the stage (thatsRight). I can reference it outside of a function to initially set it visible = false and inside the this.Correct function to visible = true, but calling another function this.removeAndCheck can not reference the same movie clip on the stage. I get the error

"TypeError: undefined is not an object (evaluating 'this.thatsRight.visible = false')"

on the line in the this.removeAndCheck function. This doesn't make sense to me. One function can reference the movie clip but another can not. This code is on frame.

this.thatsRight.visible = false;

this.Correct = function() {

  this.thatsRight.visible = true;

  setTimeout(this.removeAndCheck, 3000)
}


this.removeAndCheck = function() {
  this.thatsRight.visible = false;
  this.CheckAllCorrect();
  }

I am also have issue with this.CheckAllCorrect() being called. this.CheckAllCorrect() is also on from one but on another action layer.

This is part of a conversion of different as3 flash assets to html5 canvas assets using adobe animate CC. Any help with this would be greatly appreciated.

Not sure how canvas work on Adobe Animate, but I guess you should be passing "this" argument in the settimeout method and then access it there. For example setTimeout(this.removeAndCheck, 3000, this) and then this.removeAndCheck = function( value ). "value" parameter will hold reference to "this" — Sameer Kumar Jain, Mar 22 '16 at 07:01
FYI this isn't AS3, it's just JS. I'll remove the `[actionscript-3]` tag. — Aaron Beall, Mar 22 '16 at 16:25

score 0 · Answer 1 · answered Mar 22 '16 at 15:22

@Sammeer is correct, this is a scoping issue. Typically I get around this with a Function.bind

setTimeout(this.removeAndCheck.bind(this), 3000);

You might also see local variable binding like this:

var that = this;
setTimeout(function() { that.removeAndCheck(); }, 3000);

Here is some further reading.

score 0 · Answer 2 · answered Nov 26 '21 at 12:07

This is a scoping issue with the value of the this variable, which is a common mistake in javascript. To avoid these issues completely, just use arrow functions instead:

this.thatsRight.visible = false;

this.removeAndCheck = () => {
  this.thatsRight.visible = false;
  this.CheckAllCorrect();
}

this.Correct = () => {
  this.thatsRight.visible = true;
  setTimeout(this.removeAndCheck, 3000)
}

Trouble referencing object from within function - adobe animate canvas

2 Answers2