javascript - 为什么这个 requestAnimationFrame 设置无法正常执行？

Question

渲染 Canvas 的函数是类的原型(prototype)方法，如下所示:

Engine.prototype.renderCameras = function() {        console.log('render ok');}

When I try to run this code directly, it works fine:

engine.renderCameras()
>>> render ok

当我尝试在 Chrome 或 Firefox 中使用 requestAnimationFrame 运行它时，我得到了这个:

window.requestAnimFrame(engine.renderCameras())
>>> render ok
>>> Error: Component returned failure code: 0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS) [nsIDOMWindow.mozRequestAnimationFrame]

它运行，但总是抛出错误。那可不酷。

当我尝试像这样运行它时:

window.requestAnimFrame(engine.renderCameras)
>>> 0

它什么都不做。

我能够通过使用闭包解决这个问题，但我仍然想知道为什么我不能将这样的函数传递给 requestAnimationFrame。

Answer 1

window.requestAnimFrame(engine.renderCameras())

不是将函数传递给requestAnimFrame，而是将engine.renderCameras的返回值传递给requestAnimFrame >。返回值可能不是函数，这就是您收到此错误的原因。

window.requestAnimFrame(engine.renderCameras)

而是正确地传递了一个函数引用，但是随后 this ^[docs]在 renderCameras 中不会引用 engine。如果你依赖它(我根据设置假设)，你要么必须正确传递调用 engine.renderCameras 的函数:

window.requestAnimFrame(function(){
    engine.renderCameras();
});

或使用 .bind ^[docs]显式设置(和绑定(bind))this:

window.requestAnimFrame(engine.renderCameras.bind(engine));

无论哪种方式，您都必须重复调用 window.requestAnimFrame 以获得下一个动画帧，这意味着您通常使用递归函数。例如:

window.requestAnimFrame(function render(){
    engine.renderCameras();
    window.requestAnimFrame(render);
});