javascript - 使用请求动画帧绘制超出最大调用堆栈？

Question

我正在制作我自己的小 Canvas 库，因为我有时间消磨时间并尝试为我的 Canvas 对象设置动画，该方法目前看起来像这样；

proto.update = function () {


    for (var i = 0; i < this.objects.length; ++i) {

        this.objects[i].draw(this.context);
    }

    var self = this;

    requestAnimationFrame(self.update());
};

我之前没有使用过 requestAnimationFrame，但我收到一条错误消息，提示 超出最大调用堆栈。

我遵循了本教程 http://creativejs.com/resources/requestanimationframe/并且很确定我没有犯错。

我做错了什么？

Answer 1

传递给 requestAnimationFrame 的回调参数应该是对下一次重绘时要调用的函数的引用(参见文档 here )。您的错误是您在函数名称后包含了括号，这意味着它会立即执行并导致递归循环。

尝试按如下方式更新您的代码:

proto.update = function () {


    for (var i = 0; i < this.objects.length; ++i) {

        this.objects[i].draw(this.context);
    }

    var self = this;

    // Pass the function reference don't call it
    requestAnimationFrame(self.update);
};