CODEWITHSUNDEEP
javascriptrequestanimationframe
mipmap
mipmap

Reputation: 221

requestAnimationFrame scope change to window

I have a chain of objects that looks like this: 

Game.world.update()

I would like to use requestAnimationFrame to determine the framerate of this function.

However when I implement it like this:

World.prototype.update = function()
{
    requestAnimationFrame(this.update);
}

The scope changes from the world object to the window object. How do I maintain the scope I want while calling requestAnimationFrame()? I know it has something to do with anonymous functions and such, but I can't get my head around it.

Upvotes: 6

Views: 2367

Answers (3)

otoomey
otoomey

Reputation: 999

Another way of doing this is to use a lambda expression like so:

requestAnimationFrame((timestamp) => { loop(timestamp) });

This also maintains scope but it's a bit cleaner.

Upvotes: 1

Jakub Roztocil
Jakub Roztocil

Reputation: 16232

Usual approach, works everywhere:

World.prototype.update = function()
{
    var self = this;
    requestAnimationFrame(function(){self.update()});
}

Or with ES5 Function.prototype.bind (compatibility):

World.prototype.update = function()
{
    requestAnimationFrame(this.update.bind(this)});
}

Upvotes: 11

edhedges
edhedges

Reputation: 2718

Game.world.update.call(scope);

Where scope is whatever scope you want to pass in.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call#Description

Upvotes: 0

Related Questions