running requestAnimationFrame from within a new object

Question

I'm having trouble running an animation. This is inside var ob1 = function() {};. When called, it runs for a while and then I get the error Uncaught RangeError: Maximum call stack size exceeded. However, this same structure has no problems running outside of the object.

/////////////// Render the scene ///////////////
this.render = function (){

        renderer.render(scene,camera);
        if(isControls == true) controls.update(clock.getDelta());
        this.animate();
        //console.log(true);
        requestAnimationFrame(this.render());
}

/////////////// Update objects ///////////////
this.animate = function (){
        console.log("!");
}

Answer 1

You should pass a function reference to requestAnimationFrame, not invoke the function:

requestAnimationFrame(this.render);

Since you're using this inside render, you'll probably need bind:

requestAnimationFrame(this.render.bind(this));

Your version is causing a Stack Overflow (the function is calling itself synchronously, until the call stack is full).

---