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

时间:2014-06-14 21:25:05

标签: javascript jquery animation canvas requestanimationframe

我有一个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/

2 个答案:

答案 0 :(得分:4)

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

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

这类似于setInterval / setTimeout。

答案 1 :(得分:3)

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

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

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

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