Ryan Ryan - 5 months ago 39
Javascript Question

requestAnimationFrame with this keyword

I'm using

webkitRequestAnimationFrame
but I'm having trouble using it inside of an object. If I pass the
this
keyword it will use
window
and I can't find a way for it to use the specified object instead.

Example:

Display.prototype.draw = function(){
this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
//Animation stuff here.

window.webkitRequestAnimationFrame(this.draw);
};


I have also tried this but to no avail:

Display.prototype.draw = function(){
this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
//Animation stuff here.

var draw = this.draw;
window.webkitRequestAnimationFrame(draw);
};

Answer

I'm trying to pass display.draw which is the function in which webkitRequestAnimationFram resides.

webkitRequestAnimationFrame will presumably call the function you pass in, something like this:

function webkitRequestAnimationFrame(callback)
{
    // stuff...
    callback();
    // other stuff...
}

At this point, you have dissociated (detached) the draw function from its invocation context. You need to bind the function (draw) to its context (the instance of Display).

You can use Function.bind, but this requires JavaScript 1.8 support (or just use the recommended patch).

Display.prototype.draw = function()
{
    // snip...

    window.webkitRequestAnimationFrame(this.draw.bind(this));
};