HTML5画布在鼠标拖动期间不显示重绘内容

Question

我在HTML5画布上有a circuit simulator that redraws as you drag things around。

我注意到，有时候，它在拖动过程中无法重绘。它保留最后绘制的帧，直到我停止移动鼠标，然后开始显示更新的内容。

起初我认为这可能是代码的某种问题，我使用油门绘制低于60fps。也许计时器事件被更高优先级的UI事件或类似事件所淹没。但是我在Chrome中分析了代码，并且分析器确认正在调用绘图代码并在合理的时间内完成。

这是我在拖动问题时收集的示例个人资料的屏幕截图。请注意绘图代码在5ms内完成，并有足够的空闲时间：

所以大部分时间我都很难过，需要知道要检查什么。

用户操作触发重绘时不显示的常见原因是什么？

Answer 1

检查其他绘制循环。

我注意到分析器的堆栈跟踪显示错误的重绘代码。该程序有一个对话框，其中包含有时需要动画的画布。尽管没有显示对话框，该代码仍然是垃圾邮件requestAnimationFrame。不知怎的，这干扰了主要的绘制循环，虽然我不知道完全为什么。所有的抽奖都发生在隐藏的对话框中。

一旦我修正了垃圾邮件requestAnimationFrame的对话框代码，拖动时暂停的问题就消失了。

Answer 2

使用requestAnimationFrame代替setTimeout。

在我测试期间（Chrome，Windows 10），我发现如果我只是快速上下旋转鼠标滚轮，那么我可以阻止setTimeout回调运行直到我停止。这使得setTimeout在画布动画方面成为一个非常糟糕的主意。我将限制代码切换为使用requestAnimationFrame周期，只是在冷却期结束之前保持重新调度，并且延迟明显减少。