Question

简单地提出这个问题，有没有办法提供一个实时的Web应用程序，需要在用户移动鼠标的每个坐标处完成处理而不丢弃任何鼠标事件？

使用JS，如果我们想要跟踪用户的鼠标位置，我们基本上只限于将mousemove处理程序附加到某个元素。不幸的是，如果我们使用鼠标位置执行一些昂贵的程序，例如通过WebGL或2D画布将动态图形绘制到屏幕上，我们可以（并且通常会）失去很多准确性。

例如，如果我们将用户的鼠标链接到第一人称WebGL游戏中的摄像头并且用户不规律地移动，则由于摄像机无法准确模仿鼠标指向的位置，因此会丢失一些沉浸感。或者，更简单地说，如果我们想要在用户拖动光标的任何地方将多个图像标记到2D画布上，那么如果用户碰巧绘制光标，我们将无法生成漂亮的平滑曲线。

最终，由于JS是单线程的，我们不能只运行一个单独的线程，其唯一目的是收集鼠标坐标，让应用程序尽可能快地处理输入（也许网络工作者会在这里提供帮助？）。同样地，我们不能轻易地优先收集需要发生的处理的鼠标事件，因为我们可以快速开始使处理方面处于饥饿状态。

我有什么方法可以忽略这里吗？如果所有应用程序都记录鼠标坐标，您通常可以非常准确地记录鼠标的位置。当我们必须基于该输入实时进行一些重要但非不合理的处理时，问题就出现了。

Answer 1

根据您正在做的事情，您可以通过在超时处理程序中一次一点地处理来将处理与事件处理交错。这使得事件处理程序有机会在两者之间触发。

var workInterval = 0; // or try other small values
function doABitOfWork() {
    // ... Do stuff, but don't take too long ...
    if (!finished) {
        setTimeout(doABitOfWork, workInterval);
    }
}
setTimeout(doABitOfWork, workInterval);

我成功地使用了这个技巧，在构建繁重的HTML表时使页面响应。

通过实时鼠标输入平衡性能繁重的程序

1 个答案: