Цикл forEach внутри requestAnimationFrame

#javascript #recursion #coffeescript #three.js

#javascript #рекурсия #coffeescript #three.js

Вопрос:

Я хотел бы структурировать проект (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 , к переполнению стека, и есть ли какие-либо проблемы с производительностью при выполнении чего-то подобного.

Комментарии:

1. Вы могли бы снять некоторую нагрузку со стека вызовов с помощью renderable() for renderable in renderables .

Ответ №1:

requestAnimationFrame() Метод сообщает браузеру запустить функцию обратного вызова непосредственно перед тем, как произойдет следующее перерисовывание.

Это особенно полезно при использовании JavaScript для анимации и повторяющихся обновлений пользовательского интерфейса. Поскольку это зависит от времени перерисовки браузера, это дает более плавный эффект, чем использование чего-то вроде setInterval()

requestAnimationFrame() Метод выполняется только один раз. Вы можете выполнять цикл снова и снова, используя технику, называемую рекурсией.