元素上的 Javascript 事件响应能力

Question

我正在编写一个 html5 应用程序，它可以在 Canvas 上操作视频。我还在其上显示了一个自定义(自绘)鼠标光标。为了更新我的应用程序，我调用 setInterval 函数将内容绘制到 Canvas 上。

当我处理视频时，我需要:非常高的刷新率+大量的处理器时间来绘制。 (每帧约 50 毫秒)。

我的绘图功能导致我的鼠标功能缺乏。 (这是我可以接受的)。

但是...在它饥饿结束后，它会对旧事件做出响应。鼠标最多需要 3 帧才能捕获，以便我可以将其渲染在正确的位置。这意味着当您停止移动鼠标后，您可以看到光标“爬行”。

1. 有没有办法让 onmousemove 事件比我的 setInterval(drawFunction) 具有更高的优先级？

2. 在绘制函数中时，我可以“询问”是否有待处理的鼠标事件，并撤销当前对绘制的调用？

还有其他我可以使用的技巧吗？ (我可以在 webWorker 中绘制后台缓冲区，但据我通过阅读 html5 了解到，这只是线程抽象 [线程不是并发的])

Answer 1

您无法确定事件处理的优先级，至少不能直接确定优先级。

您可能会考虑使用自己的计时器驱动代码来检查待处理的鼠标事件。鼠标事件处理程序只会将工作请求放入队列中。您的视频操作可以只检查队列并处理它认为合适的操作。因此，真正的鼠标工作也将在计时器代码中完成。

编辑这就是我的想法。您仍然有鼠标事件的处理程序:

var eventQueue = [];

canvasElement.onmousemove = function(evt) {
  evt = evt || event;
  eventQueue.push({ type: evt.type, x: evt.clientX, y: evt.clientY, when: new Date() });
};

因此鼠标处理程序不会执行任何实际工作。他们只是将详细信息记录在事件列表中，然后返回。

然后，定时器驱动的主循环可以检查事件队列并决定要做什么。例如，如果它看到一整串“mousemove”事件，它可以计算所有这些事件的位置净变化，并仅更​​新一次光标位置。