Skip to content

Instantly share code, notes, and snippets.

@rook2pawn
Created January 26, 2019 02:44
Show Gist options
  • Save rook2pawn/a6b09d34c6b68435aacf5e8502485c5c to your computer and use it in GitHub Desktop.
Save rook2pawn/a6b09d34c6b68435aacf5e8502485c5c to your computer and use it in GitHub Desktop.
remember to prebind your animation calls if you are going to need bind!

The normal flow is

function animate() {
    requestAnimationFrame(animate);
    // do render stuff
    chicken.position.x++;
}
animate();

However when you encapsulate your code into a class

Normal Animation Step in Class

animate() {
    requestAnimationFrame(this.animate.bind(this));
    // do render stuff
    this.chicken.position.x++;
}

// somewhere else
this.animate.call(this);

I noticed you can get a measurable execution speedup by prebinding the animate function to do this

Optimized Animation Step

animate() {
    requestAnimationFrame(this.animate_binded);
    // do render stuff
    this.chicken.position.x++;
}

// somewhere else
this.animate_binded = this.animate.bind(this);
this.animate();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment