forEach loop inside RequestAnimationFrame

Question

I would like to structure a (THREEjs) project I'm working on like this

    class Blah
       scene    : new THREE.Scene()
       renderer : new THREE.WebGLRenderer()
       camera   : new THREE.PerspectiveCamera()

       render : ( renderables )->

          renderables.forEach ( renderable )->
             renderable()

          @renderer.render( @scene, @camera ) 

   foo = new Blah()

   animateMovie =->
       requestAnimationFrame( animateMovie )     
       foo.render([baz.update, bar.update])

The render method takes an array of functions to update. Would having a loop inside animateMovie , which gets called recursively using requestAnimationFrame , cause stack overflow, and is there any performance issues with doing something like this.

Answer 1

The requestAnimationFrame() method tells the browser to run a callback function right before the next repaint happens.

It's particularly useful when using JavaScript for animations and repeating UI updates. Because it ties into the browser's repaint timing, it produces a smoother effect than using something like setInterval()

The requestAnimationFrame() method only runs once. You can make it loop over-and-over again using a technique called recursion.