Question

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

对于每一个＆＃39; onmousemove＆＃39;事件我将坐标保存在一个数组中，每隔一秒后，我将该数组推入另一个数组。

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状态与这种跟踪器结合使得理论上可以完全重放用户与应用程序的交互，这个想法让我着迷。

Answer 1

为了跟踪节奏/时间，您可以为您要跟踪的每个事件保存时间戳以及x / y个位置，然后计算它们之间的差异到＆＃34;重播＆＃34;他们的时间相同。这样您就可以将它全部存储在一个数组中，而不必导航嵌套数组。

实际上＆＃34;重播＆＃34;这可能很难，因为据我所知，实际上没有办法将鼠标逼到某个位置;但是，如果您只想进行视觉重播，可以使用鼠标图标进行模拟。

Answer 2

您可以尝试在阵列中添加其他值，让我们说time。使用Date.now()，您可以获得执行操作的时间。这也可以消除数组中的数组（除非你需要其他的东西）

通过这种方式，您将获得如下所示的数组：

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

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

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

2 个答案: