requestAnimationFrame实现递归？

Question

我目前正在尝试使用three.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

requestanimationframe最简单的用法是一次又一次地调用它，直到没有必要

我在开发一个小型图书馆时学到了这一课

https://github.com/allenhwkim/jsanimation

用法

import {slideInRight} from 'jsanimation';
slideInRight(el);

Answer 3

在第一次render（）调用之后，RequestAnimationFrame将异步处理你的渲染函数，每秒约60次调用它。您的函数不是递归的，因为Javascript将继续执行代码。

但是，您应该仅在渲染函数的最后使用RequestAnimationFrame，作为函数的最后一个命令。想象一下，你有一个大场景，有很多动画：在完成参数更新之前请求下一帧，可能会造成巨大的混乱。

您还可以使用setTimeout处理动画，使用所需的帧速率调用render方法，如下所示：

var desideredFrameRate = 60;

window.myRequestAnimationFrame = function(callback) {

    setTimeout(callback, 1000/desiredFrameRate);

}