RequestAnimationFrame 中的 forEach 循环答案

【问题标题】：forEach loop inside RequestAnimationFrameRequestAnimationFrame 中的 forEach 循环
【发布时间】：2020-08-10 22:51:55
【问题描述】：

我想像这样构建一个我正在从事的 (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 递归调用它，会导致堆栈溢出，并且执行此类操作是否存在任何性能问题。

【问题讨论】：

您可以使用 renderable() for renderable in renderables 减轻调用堆栈的压力。
感谢您的提示。我会试一试。

标签： javascript recursion coffeescript three.js

【解决方案1】：

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

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

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

【讨论】：