好的，这是一个非常理论性的问题:我正在用HTML5画布元素编写动画。动画依赖于鼠标的移动(当鼠标休息=没有动画)。对于呈现，我看到以下选项:
- 选项1:不断重画画布的循环(无论鼠标是否移动)
- 选项2:通过mousemove()事件触发绘制函数(使用jQuery)
我倾向于选择2，因为渲染只在需要时处理。但是我担心一件事:如果鼠标移动得太快(特别是在较慢的机器上)，迭代可能会重叠并弄乱画布(参见下面的插图)。
所以我想到了一个变通办法:
- 选项3:使用选项2，但检查每个触发器是否已经有一个绘制迭代正在执行。如果是，则忽略触发。
但是我也看到了一些问题:在我的例子中，鼠标移动的最后一帧可能会被遗漏(因为它与之前的调用重叠)。另外，经常检查可能会降低性能(选项1中不需要)。
那么哪个选项是最好的呢?有人有这方面的经验吗?
链接到插图(还不能发布图像):https://i.stack.imgur.com/WHLDQ.png
我使用两者的组合。
我有两个全局变量(mousex,mousey)我在mousemove
上更新了这些我有一个绘图循环，从加载开始，每n秒重复一次
编辑:这个想法是将视觉和工作代码(碰撞，得分，…)分开
绘制循环每2秒触发一次，同时在everymove
上更新鼠标移动-循环设置得很慢，因为它显示了差异例子:jsfiddle.net/9jW3d/show/'
我选择选项2。选项1只是浪费资源。不要担心选项2重叠迭代。当前一个事件仍在运行时，DOM不会调用鼠标移动事件。