CODEWITHSUNDEEP
javascriptcanvastypescriptrequestanimationframe
Moo
Moo

Reputation: 3695

window.GetAnimationFrame() Is not calling callback function

I am doing this in TypeScript but I will post the compiled Javascript as well if it helps. The following is my loop() function:

TypeScript

private loop() {
    if(this._running) {
        // input, updating, and rendering
        // ...

        window.requestAnimationFrame(() => this.loop);
    }
}

JavaScript

PotatoEngine.prototype.loop = function () {
    var _this = this;
    if (this._running) {
        // input, updating, and rendering
        // ...

        window.requestAnimationFrame(function () { return _this.loop; });
    }
};

This code is called from the following init() function:

TypeScript

private init() {
    this._lastTime = Date.now();
    this._running = true;

    window.requestAnimationFrame(() => this.loop);
}

JavaScript

PotatoEngine.prototype.init = function () {
    var _this = this;
    this._lastTime = Date.now();
    this._running = true;
    window.requestAnimationFrame(function () { return _this.loop; });
};

When I debug and it gets to the requestAnimationFrame(), it never goes into the loop() function. It just exits out of init(). Why?

Upvotes: 1

Views: 300

Answers (1)

MinusFour
MinusFour

Reputation: 14423

Change:

window.requestAnimationFrame(() => this.loop);

To:

window.requestAnimationFrame(this.loop.bind(this));

This will actually call this.loop. You'll also be able to keep the context thanks to the bind.

Upvotes: 2

Related Questions