1

渲染我的画布的函数是一个类的原型方法，如下所示：

Engine.prototype.renderCameras = function() {
        console.log('渲染正常');
}

当我尝试直接运行此代码时，它工作正常：

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。

4

1 回答 1

8 
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]显式设置（和绑定）this：

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

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

window.requestAnimFrame(function render(){
    engine.renderCameras();
    window.requestAnimFrame(render);
});
于 2012-08-24T00:52:45.993 回答