requestAnimationFrame реализация рекурсивна?

Question

В настоящее время я экспериментирую с тэгом.js, который полагается на requestAnimationFrame для выполнения анимаций.

Вопрос: Не приведет ли следующий код к бесконечной рекурсии перед вращением куба и вызовом функции renderer.render?

function render() { 
    requestAnimationFrame(render); 
    cube.rotation.x += 0.1; 
    cube.rotation.y += 0.1; 
    renderer.render(scene, camera); 
} 
render(); 

код работает, но я стараюсь, чтобы улучшить мое общее понимание JavaScript.

Способ, которым я его вижу, заключается в том, что рендер вызывается как функция обратного вызова. Но означает ли это, что javascript продолжает работать через код в функции до останавливается, чтобы перейти к следующему звонку?

Answer 1

Это требует только браузер, чтобы позвонить в вашу функцию обратного вызова до следующего цикла рендеринга:

Вы должны вызывать этот метод каждый раз, когда вы будете готовы обновить анимации на экране. Это потребует вызова функции анимации до того, как браузер выполнит следующую перерисовку.

Таким образом, здесь нет рекурсии, и ваша функция продолжит выполнение.

Вы также можете отменить запрос на обратный вызов с помощью cancelAnimationFrame.

Посмотрите here.

Answer 2

После первого вызова render() RequestAnimationFrame будет асинхронно следить за вашей функцией рендеринга, вызывая ее каждые ~ 60 раз в секунду. Ваша функция не рекурсивна, так как Javascript продолжит выполнение кода.

Однако вы должны использовать RequestAnimationFrame только в самом конце вашей функции рендеринга, как последнюю команду вашей функции. Представьте, что у вас большая сцена, с большим количеством анимаций: запрос следующего кадра перед завершением обновления параметров, вероятно, вызовет огромный беспорядок.

Вы также можете использовать SetTimeout обрабатывать анимацию, вызвав метод визуализации с требуемой частотой кадров, например:

var desideredFrameRate = 60; 

window.myRequestAnimationFrame = function(callback) { 

    setTimeout(callback, 1000/desiredFrameRate); 

}