RequestAnimationFrame 中的 forEach 循环

Question

我想构建一个（THREEjs）项目，我正在像这样工作

    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])

render方法需要一个函数数组来更新。 animateMovie内部animateMovie会有一个循环，它使用requestAnimationFrame递归调用，导致堆栈溢出，并且执行此类操作是否存在任何性能问题。

Answer 1

requestAnimationFrame()方法告诉浏览器在下一次重绘发生之前运行回调函数。

在将 JavaScript 用于动画和重复 UI 更新时，它特别有用。 因为它与浏览器的重绘时间有关，所以它比使用setInterval()东西产生更平滑的效果

requestAnimationFrame()方法只运行一次。 您可以使用称为递归的技术使其反复循环。