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

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

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位置,然后计算它们之间的差异以相同的时间“重播”它们.这样一来,您也可以将其全部存储在一个数组中,而不必浏览嵌套数组.

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