从新对象中运行 requestAnimationFrame答案

【问题标题】：running requestAnimationFrame from within a new object从新对象中运行 requestAnimationFrame
【发布时间】：2013-10-18 21:39:08
【问题描述】：

我在运行动画时遇到问题。这是在var ob1 = function() {}; 里面。调用时，它会运行一段时间，然后我收到错误Uncaught RangeError: Maximum call stack size exceeded。但是，同样的结构在对象之外运行没有问题。

/////////////// Render the scene ///////////////
this.render = function (){

        renderer.render(scene,camera);
        if(isControls == true) controls.update(clock.getDelta());
        this.animate();
        //console.log(true);
        requestAnimationFrame(this.render());
}

/////////////// Update objects ///////////////
this.animate = function (){
        console.log("!");
}

【问题讨论】：

requestAnimationFrame 期待回调，你只是传递了undefined。

标签： javascript three.js requestanimationframe

【解决方案1】：

您应该将函数引用传递给requestAnimationFrame，而不是调用函数：

requestAnimationFrame(this.render);

由于您在render 中使用this，因此您可能需要bind：

requestAnimationFrame(this.render.bind(this));

您的版本导致堆栈溢出（函数同步调用自身，直到调用堆栈已满）。

【讨论】：

这实际上是我首先尝试的，因为这是我通常所做的，但它不起作用。在运行 this.animate() 之后，它只运行 1 次并告诉我 this.animate() 不存在。如果我把它作为第一件事，我会得到Uncaught TypeError: Type error cleanedupmenufunctions.php:167 render
我刚刚更新了我的答案，你需要一个绑定函数，有一个固定的this 值。
啊，requestAnimationFrame(this.render.bind(this)); 行很好用！多次刷新后没有错误。
请注意旧版浏览器不支持绑定。我提供的 MDN 链接包含一个 polyfill。
您不想以这种方式使用 bind，因为每次调用 bind 时都会创建一个新的函数对象。相反，您希望在初始化时像const render = this.render.bind(this); 那样预先绑定，然后在循环调用requestAnimationFrame(render) 中进行绑定。你也可以用反应的方式来做，在你的构造函数中做this.render = this.render.bind(this);然后你可以调用requestAnimationFrame(this.render);