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

2019-11-09 08:38:13 阅读：140 来源： 互联网

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

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

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

标签：reactjs,javascript
来源： https://codeday.me/bug/20191109/2012736.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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