Issues with function losing scope

#1

I am working on the Game of Life and I have tried to get past this problem every way imaginable. Please help! I am desperate!

When I call a function inside of setInterval or requestAnimationFrame it tells the console that this.state is undefined. It loses scope. e.g.

requestAnimationFrame(this.fullBoardNeighborCheck)

So, I tried using arrows with the function like this:

requestAnimationFrame(() => this.fullBoardNeighborCheck)

And it does absolutely nothing. No console errors… nothing!

So I tried binding it like this:

requestAnimationFrame(this.fullBoardNeighborCheck.bind(this))

And this freezes the page, entirely! My first thought after seeing that was, “my function is running but so clunky that its freezing the page” but after testing it various ways, I can guarantee that isn’t what is happening.

Does anyone have any idea why this is happening?

Here is the link to the full code - http://codepen.io/escottalexander/pen/oZRVLe/?editors=0010

Thanks so much for helping! I am truly stumped.

#2

sounds like a callback issue. With a callback the this is lost and so some people will assign this to a variable like so

var self = this;

and then they reference self.function();

sorry I can not help more but this is one area of JS that trips me up still.

#3