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内部有一个循环（使用requestAnimationFrame递归调用）会导致堆栈溢出，并且在执行此类操作时会出现性能问题。

Answer 1

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

在使用JavaScript制作动画并重复UI更新时，此功能特别有用。由于它与浏览器的重绘时间有关，因此与使用setInterval()

之类的东西相比，它产生的效果更平滑。

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

forAach循环在RequestAnimationFrame中

1 个答案: