Question

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

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

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

engine.renderCameras()
>>> render ok

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

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)

而是正确传递函数引用，但renderCameras内的this ^[docs]不会引用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);
});

为什么requestAnimationFrame设置无法正常执行？

1 个答案: