Javascript 如何重放鼠标坐标列表以反映输入的节奏？

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

对于每一个“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

位置一起保存，然后计算它们之间的差异，以相同的时间“重放”它们。这将允许您将所有数据存储在一个数组中，而不必导航嵌套数组

---

实际上“重放”这可能是困难的，因为据我所知，没有办法真正强迫鼠标到某个位置；但是，如果您只需要一个可视化回放，您可以使用鼠标图标来模拟它。

您可以尝试向数组中添加另一个值，比如说

time

。使用

Date.now（）

可以获得执行操作的时间。这还可以消除阵列中的阵列（除非您需要它用于其他用途）

这样，您将获得如下所示的和数组：

 [
   { x: 393, y: 176, time: 1234567890123 },
   { x: 393, y: 178, time: 1234567890125 }
 ]

---

然后，您可以使用2个时间之间的增量来确定这两个操作之间经过的时间。

您还可以保存时间戳或与上次记录位置的偏移量，这样，您就不需要每秒创建一个数组，只需要一个数组包含每个mosemove事件。因此，我将获取时间增量A和B，然后等待该时间到期，然后将“光标”移动到点B并重复？这意味着A和B之间的时间增量是执行该操作所需的时间。正如有人提到的，您可以使用光标图标“重放”它，只需更改其位置。