javascript - 如果快速键入，击键停留/保持时间不正确

Question

目标:收集击键动态数据(停留时间、飞行时间、停机时间...)。

已完成:成功获取两次按键之间的飞行时间。

问题:当我快速打字时，我能够正确获取飞行时间，但停留时间会出现困惑。

最小、完整且可验证的示例:https://jsfiddle.net/nirajpandkar/600orotn/

例如，为了重现错误，您可以尝试慢慢地键入单词“the”，一次一个单词。停留时间如下 -

Pressed key 84 for 0.107

Pressed key 72 for 0.091

Pressed key 69 for 0.091

现在尝试尽可能快地在单词“the”中输入字母“t”和“h”(您不必费力)。停留时间是 -

Pressed key 84 for 0.008

Pressed key 72 for 1490285526.868

Pressed key 69 for 0.074

问题:为什么会发生这种情况以及如何解决？

Answer 1

出现该错误的原因是，当快速输入时，keydown 可能会在keyup 之前触发。因此，dwellTime 可能尚未重置。

为了缓解这个问题，您可以在每个 keyCode 的基础上存储 dwellTime ，以便它将 keydown 与 keyup 结合起来。给定 key ，如下所示:

var dwellTimes = {};
$('#inputbox').keydown(function(e) {
  if (!dwellTimes[e.which])
    dwellTimes[e.which] = new Date().getTime();
});

$('#inputbox').keyup(function(e) {
  var dwellTime = new Date().getTime() - dwellTimes[e.which];
  delete dwellTimes[e.which];

  $('#output').prepend("<p>Pressed key " + e.which + " for " + dwellTime / 1000 + "</p>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputbox" type='text'>
<div id="output"></div>

请注意，我在本示例中使用了 prepend()，因此您不必向下滚动即可查看新引发的事件。另外，我更改了逻辑，以便如果按住某个键，则 dwellTime 会考虑这一点，而您之前的逻辑则没有。如果您不需要该行为，只需从 keydown 事件处理程序中删除 if 条件即可。