无限次运行函数答案

【问题标题】：Run a function infinite times无限次运行函数
【发布时间】：2016-12-05 07:13:09
【问题描述】：

我正在尝试制作一个必须将render 函数作为循环运行的视频游戏引擎。当这个函数完成后，我想再次运行它，一次又一次……但是当我尝试这个时：

function render() {
    // some code here which takes ~ 0.00015 second to run
}

while(1) { render(); }

浏览器会在几秒钟内冻结。所以我尝试了另一种方法：

function render() {
    // some code here which takes ~ 0.00015 second to run
}

setTimeout(render);
// I've tried also
setTimeout(render, 1);

还有：

function render() {
    // some code here which takes ~ 0.00015 second to run

    setTimeout(render);
    // OR
    setTimeout(render, 1);
}

但是每秒只运行该函数 ~ 500 次，我想运行它 ~ 5000 次。如果我查看运行时间（0.00015 秒），这是可能的，但我找不到这样做的方法。

有人有想法吗？

【问题讨论】：

试试requestAnimationFrame，但如果您已经获得 500 fps，为什么还需要更多？
@Lucas Trzesniewski：您应该将此作为答案重新发布。
@drheart 有人已经 FGITWed 那个，但老实说，我对 OP 的 500 fps 数字很怀疑 ;)
一个游戏引擎最多需要60fps。
是的 500 fps 对于引擎来说确实太高了，但我正在运行的代码只是在屏幕上绘制 3 个矩形，所以如果我不能在一秒钟内渲染 5000 次会发生什么渲染很多大图和动画？

【解决方案1】：

你想要做的是这样使用window.requestAnimationFrame：

function render() {
    window.requestAnimationFrame(render);
}

window.requestAnimationFrame(render);

您永远无法获得“无限”数量的呼叫，这取决于您的硬件有多强大。您还可以轻松计算“增量时间”（两个连续的render 调用之间经过的时间量），以使任何用户的游戏动画流畅，无论他们的硬件是什么。

【讨论】：

通过计算运行render 函数所需的时间，我可以看到无论我使用什么（requestAnimationFrame、setInterval），我都不能一次运行这些函数 5000 次。但这应该是可能的，我不明白为什么它不起作用。对于window.requestAnimationFrame 方式，最大设置为 60 fps，但不允许减少“增量时间”。我将尝试测量我测试过的不同方式的增量时间，并在明天在这里发布报告。
（抱歉迟到了）经过几次测试，requestAnimationFrame 的增量时间（奇怪地）比简单的setTimeout 高出大约 2 倍（那不是setInterval 我'我编辑了我的问题）。而当我在屏幕上放置 4000 个多边形时，使用 setTimeout 方式的 FPS 大约高出 2 倍.....