Javascript Canvas 动画超出了最大调用堆栈大小

Question

我有一个我一直在搞乱的 jsFiddle，试图让我的小游戏通过类等变得更有条理，但是当我请求动画帧时，传入对象（每个帧都有一些功能每个对象），我得到一个最大调用堆栈大小错误。如何在不放弃课程的情况下解决此问题？

jsFiddle： http://jsfiddle.net/Blawkbuilder/Q5U3X/109/

我怀疑是罪魁祸首的台词：

    window.requestAnimationFrame(draw(p1,p2));

但控制台链接到的行出现在 jquery 的某处：

    } else if ( !rhtml.test( elem ) ) {

修复？我对 javascript 有点陌生。

（如果需要，这里是以前的，不是基于类的版本，它仍然可以按照我想要的方式运行） http://jsfiddle.net/Blawkbuilder/9hmca/131/

Answer 1

requestAnimationFrame 接受回调。您正在评估draw(p1, p2) 并将其返回值传递给requestAnimationFrame。你应该改成这样：

requestAnimationFrame(function() { draw(p1, p2); });

这类似于 setInterval/setTimeout。

Answer 2

requestAnimationFrame 将不带参数的回调函数作为参数。你得到堆栈溢出的原因是你提供了参数draw(p1, p2)（而不是draw），它实际上调用draw函数，然后犯了同样的错误调用draw 函数...（等等）。您在第二个 jsFiddle 中做得正确。

要解决这个问题，您需要 draw 不接受任何参数。或者，创建一个不带任何参数的“包装器”函数，它本身只是使用适当的参数调用 draw。正如另一个答案所暗示的那样，最简单的方法是像requestAnimationFrame(function() {draw(p1, p2); }) 那样做。

顺便说一句，告诉你这是比喻给你一条鱼，而不是教你如何钓鱼。要真正理解这一点，您需要更多地了解函数式编程，这可能会变得有点抽象。在此示例中，请了解函数只不过是具有“可调用”（或“可调用”）特殊属性的对象。 requestAnimationFrame 是一个函数，其第一个参数 callback 是另一个函数。换句话说，requestAnimationFrame 期望 callback 是可调用的。但是你给它的是调用函数的result，而不是函数本身。

function() {draw(p1, p2);} 起作用的原因是function() { ... } 语法构造了一个匿名 函数——一个没有名称的函数，但仍然是一个可以调用的函数。