Ticker.remove function not behaving as expected

[SamuSan]

Hi all, 

I am developing a simple 2D game with PIXI js and have created an FSM that controls game flow at a high level.
During some of the transitions between game states it would be desirable to have some animations in the game halt while others continue on or change. 
I have read the docs for PIXI.ticker.Ticker and my proposed solution was to use the remove function as outlined below. This is the most basic example I can give. 

class SomeState extends State {
  constructor(game){
    //does some stuff with the passed in game
  }
  enter(){
   //attach some animation loops to the app ticker
   this.game.app.ticker.add(this.game.someAwesomeFunction.bind(this.game));
  }

//...a bunch of things to do with updating a state etc

  exit(){
    //Here I would like to essentially pause a subset of the animation loops attached in the enter 
    //function like so:

    this.game.app.ticker.remove(this.game.someAwesomeFunction);

    //This doesn't behave as expected sadly, the function is not removed from the ticker and just 
    //continues on like nothing happened
  }
}

I have observed the function signature being passed to `remove` and it matches the signature being passed to `add`.
Has anyone got any ideas as to why I am unable to remove a listener instance from the game ticker? Or in fact have an opinion on this approach in general, may I am barking up the wrong tree.

Thank you in advance!

[themoonrat]

Since you're doing this within a class, try adding the context as a second parameter when adding and removing with the ticker. So

this.game.app.ticker.add(this._someAwesomeFunction, this);

[ivan.popelyshev]

Where is "someAwesomeFunction" defined anyway?

[SamuSan]

@ivan.popelyshevI have updated my code example to be explicit. I am binding to the game in the add function and have tried a few different variations of binding in the remove function without any luck. 

[Taz]

Try caching the return value from bind(). Calling it twice is creating two separate functions maybe, one function that's passed to add() and a separate function that's passed to remove(). Or don't use bind() and pass the context instead like @themoonrat said. Either way should work since you'll be passing the same parameter/s to add() and remove(). -edit: that last line's more clear now I think;)

"The bind() method creates a new function," referenced from Mozilla MDN Docs

[SamuSan]

3 minutes ago, magig said:

Try caching the return value from bind(). Calling it twice is creating two separate functions maybe, one function that's passed to add() and a separate function that's passed to remove(). Or don't use bind() and pass the context instead like @themoonrat said. Either should work I think since the parameter/s to add() and remove() will be the same using either method.

"The bind() method creates a new function," referenced from Mozilla MDN Docs

Oh! I get you, that is a pretty hilarious gotcha. I see what @themoonrat was speaking to now, I had no idea that bind would do that, I guess it makes sense in terms of partial application but is definitely not what I was going for here. 
I will try that out tonight and see if I have any luck. Thank you both!
 

[SamuSan]

Success! Thank you so much @magig @themoonrat for your help and being a rubber ducky. I feel a bit stupid now lol. 
For anyone who has a similar problem:

class SomeState extends State {
  constructor(game){
    //does some stuff with the passed in game
  }
  enter(){
   //attach some animation loops to the app ticker
   //this.game.app.ticker.add(this.game.someAwesomeFunction.bind(this.game)); 
   // ^^^^ This creates a copy of the function ^^^^^ Thus when removing it there is no reference to 
   //use to find it. Prefer: 

    this.game.app.ticker.add(this.game.someAwesomeFunction, this.game); 
  }

//...a bunch of things to do with updating a state etc

  exit(){
    this.game.app.ticker.remove(this.game.someAwesomeFunction, this.game);
    // Passing the correct context here allows the ticker to find the correct function for removal.
  }
}