在 JavaScript 中存储鼠标移动数据的最有效处理方式是什么？答案

【问题标题】：What is the most processing efficient way to store mouse movement data in JavaScript?在 JavaScript 中存储鼠标移动数据的最有效处理方式是什么？
【发布时间】：2011-10-13 04:40:37
【问题描述】：

我正在尝试准确记录鼠标在网页上的移动位置（到像素）。我有以下代码，但结果数据存在差距。

var mouse = new Array();
$("html").mousemove(function(e){
    mouse.push(e.pageX + "," + e.pageY);
});

但是，当我查看记录的数据时，这是我所看到的一个示例。

76,2 //start x,y
78,5 //moved right two pixels, down three pixels
78,8 //moved down three pixels

这最好看起来更像：

76,2 //start x,y
77,3 //missing
78,4 //missing
78,5 //moved right two pixels, down three pixels
78,6 //missing
78,7 //missing
78,8 //moved down three pixels

有没有更好的方法来逐像素存储鼠标移动数据？我的目标对于网页来说是不是太不切实际了？

【问题讨论】：

为什么需要那种“细节”？你不能从鼠标日志中辨别出那种细节吗？
鼠标首先不会在相邻像素之间移动——它是从一个点移动到另一个点。如果您需要知道它的交叉点，请通过计算点之间的直线（或曲线）进行插值。
可能没有必要记录 100% 的像素，但我想尽可能接近。

标签： javascript mouseevent mousemove

【解决方案1】：

您只能以最快的速度保存该信息。 mousemove 事件以由浏览器确定的频率触发，通常最高为 60hz。由于您当然可以以超过 60 像素/秒的速度移动指针，因此除非您进行某种插值，否则您将无法填补空白。

这对我来说听起来是个好主意，想象一下当您将鼠标跳到屏幕的另一侧时同时触发 1920 个 mousemove 事件会带来麻烦（和性能拖累） - 我什至不认为鼠标本身的轮询速度足够快，游戏鼠标的频率不会超过 1000hz。

在此处查看实时帧率测试：http://jsbin.com/ucevar/

关于插值，请参阅实现 Bresenham's line algorithm 的 this question，您可以使用它来查找缺失点。这是一个难题，iPad 的PenUltimate app 实现了一些惊人的插值，使线条图看起来非常自然流畅，但在网络上却没有。

至于存储数据，只需推送[x,y] 的数组，而不是字符串。缓慢的事件处理函数也会降低刷新率，因为事件会在被抛在后面时被丢弃。

【讨论】：

【解决方案2】：

当您移动鼠标时，鼠标并不存在于每个像素上。在更新周期中，它实际上以一种平滑的方式从一个点跳到另一个点，所以在眼睛看来，它似乎命中了中间的每个点，而实际上它只是随意地跳过。

我建议只存储注册鼠标移动事件的点。两点之间的每个间隔都会创建一条线，可以根据需要使用它。

_{而且，就处理效率而言...}

处理效率将取决于许多因素。正在使用什么浏览器，计算机有多少内存，代码针对数据结构的优化程度等。

与其过早优化，不如编写程序，然后对慢速部分进行基准测试，找出瓶颈所在。

我可能会在原型上创建一个自定义 Point 对象，其中包含一堆函数，看看它是如何执行的
如果这太慢了，我会切换到使用带有x 和y 设置的对象字面量。
如果出现问题，我会改用两个数组，一个用于x，一个用于y，并确保始终将 x 和 y 值设置在一起。
如果那陷入困境，我会尝试一些新的东西。
转到 4

【讨论】：

【解决方案3】：

有没有更好的方法来存储逐像素的鼠标移动数据？

你对“更好”的标准是什么？

我的目标对于网页来说是不是太不切实际了？

如果您的目标是每次光标进入一个新像素时存储一个新点，是的。另请注意，浏览器像素不一定会 1:1 映射到屏幕像素，尤其是在 CRT 显示器的情况下，几乎可以肯定不会。

【讨论】：