javascript - 如何重播鼠标坐标列表以反射(reflect)输入它们的节奏？

我想创建自己的客户端鼠标跟踪器，它将数据发送到数据库，我可以获取数据，但是我不确定如何以与原始输入方式完全匹配的方式重放数据。

对于每个“onmousemove”事件，我都将坐标保存在一个数组中，每隔一秒钟，我就会将该数组放入另一个数组中。

Array(2)[
  Array(34)
  0:{x: 393, y: 176}
  1:{x: 393, y: 175}
  2:{x: 393, y: 176}
  3:{x: 388, y: 182}
  4:{x: 383, y: 189}
  5:{x: 379, y: 195}
Array(6)
  0:{x: 393, y: 176}
  1:{x: 393, y: 175}
  2:{x: 393, y: 176}
  3:{x: 388, y: 182}
  4:{x: 383, y: 189}
  5:{x: 379, y: 195}
]

我显然没有考虑到这一点，因为我的逻辑在重播阶段就崩溃了，我以为我会每秒迭代一个嵌套数组，但这会非常快地发生，然后我想将一秒钟除以数组中元素的数量。

数组1有10个元素，因此时间间隔将每100毫秒触发一次移动光标，这仍然不是正确的解决方案，因为用户可能在第二个的上半部分创建了所有坐标，而在第二个下半部分没有创建所有坐标导致重播丢失所有真实的用户动态。

因此，我应该以哪种方式保留数据，以便可以在不丢失用户在重放过程中的确切行为的情况下重放数据？

通过将React Redux状态与这种跟踪器结合使用，理论上可以完全重播与该应用程序的用户交互，这个想法让我着迷。

最佳答案

为了跟踪节奏/定时，您只需将时间戳以及所跟踪的每个事件的x / y位置保存在一起，然后计算它们之间的差异即可在相同的时间“重播”它们。这样一来，您也可以将其全部存储在一个数组中，而不必浏览嵌套数组。

实际上，“重放”这可能很困难，因为据我所知，没有办法将鼠标实际推到某个位置。但是，如果您只想视觉重播，则可以使用鼠标图标对其进行模拟。

关于javascript - 如何重播鼠标坐标列表以反射(reflect)输入它们的节奏？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48956263/