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

Question

我有一个jsFiddle，我一直在搞乱，试图让我的小游戏变得更有组织等等，但是当我请求一个动画帧时，传入对象（每个帧都有一个每个对象的函数很少），我得到一个最大调用堆栈大小错误。如何在不放弃课程的情况下解决这个问题？

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

我怀疑这条线路是culpurit：

    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），实际上调用 {{1}函数，然后犯了同样的错误：调用draw函数......（等等）。你在第二个jsFiddle中正确地做了。

要解决此问题，您需要draw不接受任何参数。或者，创建一个＆＃34;包装器＆＃34;没有任何参数的函数，它本身只是用适当的参数调用draw。最简单的方法是执行draw之类的其他答案。

顺便说一句，告诉你这是隐喻地给你一条鱼，而不是教你如何钓鱼。要真正理解这一点，你需要更多地了解函数式编程，这可能会有点抽象。在这个例子中，理解函数只不过是具有特殊属性的对象，可以调用＆＃34; （或＆＃34; invokable＆＃34;）。 requestAnimationFrame(function() {draw(p1, p2); })是一个函数，其第一个参数requestAnimationFrame是另一个函数。 callback期望requestAnimationFrame可以调用，换句话说。但是你给它调用函数的结果，而不是函数本身。

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