当我重新启动KineticJS游戏时，画布/图层正在堆叠。导致性能问题。

Question

我使用KineticJS制作了一个游戏并添加了一个标准的html按钮，允许用户重新启动游戏。我基本上将所有游戏代码包装在一个函数中，然后将该函数附加到按钮上。它可以工作，但每次游戏重新加载它会变得非常慢。我认为这是因为画布和图层每次都被重新生成并且彼此叠加。

我尝试将destroy（）添加到点击处理程序，但它只是冻结了页面。我认为这可能是某种与同时创建和删除画布有关的范围问题。

如果有人可以看看我的jsfiddle，看看他们是否能找到让用户重新启动游戏而不会影响性能的方法，我真的很感激输入。

谢谢！

http://jsfiddle.net/fwS2d/

特定的jQuery调用位于代码的末尾：

 $('#restart').on('click' , function(){
restart();
});

Answer 1

您定义了一个单独的重启功能，在该功能中，您始终使用vars来存储创建的对象，这是干净的。我敢打赌，你依靠这些封闭装置让垃圾收集器在不再使用时擦除它们 然而，在考虑重新启动游戏之前，你已经有一件事需要考虑了：第一次调用restart（）时，所有的init进程都完成了，然后函数返回：为什么不会在那里重新收集每个对象点？
这是因为这些对象和全局对象之间仍有3种类型的链接：
- DOM内容。 （contentStage是一个链接到'content'div的对象。）
- 事件处理程序。 （小鼠）。
- 计时器。 （setInterval的）。

当你再次调用restart时，你会堆积新的内容/处理程序/计时器，而旧的内容/处理程序/计时器将不会被回收：例如，你将拥有更多的函数和setIntervals调用的函数 - 因为减速 - 。

==＆GT;你需要添加一个clear（）函数来清除DOM，删除鼠标处理程序，并清除所有间隔 只有在清除之后，您才能安全地调用restart（）以获得全新的游戏 注意不要对任何对象保持任何引用。