Javascript 画布动画帧渲染：无限循环与mousemover（）上的触发

好的，这是一个非常理论化的问题： 我正在用HTML5画布元素编写一个动画。动画取决于鼠标移动（当鼠标静止=无动画时）。对于渲染，我看到以下选项：

• 选项1：不断重新绘制画布的循环（无论鼠标是否移动）
• 选项2：通过mousemove（）事件触发draw函数（使用jQuery）

我倾向于选择2，因为渲染只在需要时进行。但我担心一件事：如果鼠标移动太快（尤其是在较慢的机器上），迭代可能会重叠并弄乱画布（请参见下面的插图）

所以我想到了一个解决办法：

• 选项3：使用选项2，但检查每个触发器是否当前正在执行绘制迭代。如果是，则忽略触发器

但我在这里也看到了一些问题：如我的插图所示，鼠标移动的最后一帧可能被忽略（因为它与以前的调用重叠）。此外，持续检查可能会降低性能（选项1中不需要）

那么，哪一个选项是最好的呢？有人有这方面的经验吗

---

链接到插图（还不能发布图片）：

我选择选项2。选择1只是浪费资源。

---

不要担心选项2的重叠迭代。当前一个mousemove事件仍在运行时，DOM不会调用它

我将两者结合使用

我有2个全局变量（mousex，mousey） 我在mousemove上更新这些

我有一个绘图循环，从加载开始，每n秒重复一次

编辑：想法是分割视觉代码和工作代码（冲突、分数等）

当鼠标移动在everymove上更新时，绘图循环每2秒触发一次

-循环设置得很慢，因为它显示了差异 例子：

---

jsfiddle.net/9jW3d/show/`

循环是否持续运行？在我看来，这似乎是选项1，还是我错了？