如果快速键入,击键时间不正确 dwell/hold
Incorrect keystroke dwell/hold time if typed fast
目标:收集击键动态数据(停留时间、飞行时间、下降到停机时间...)。
完成的事情: 成功获取两次击键之间的飞行时间
问题:当我快速打字时,我能够正确获得飞行时间,但停留时间混乱。
最小、完整且可验证的示例: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
问题:为什么会发生这种情况,应该如何解决?
错误的原因是,当快速输入时,keydown
可能会在 之前 触发前一个 keyup
。因此 dwellTime
可能尚未重置。
为了缓解这个问题,您可以在每个键代码的基础上存储 dwellTime
,以便它将 keydown
与给定键的 keyup
结合起来,如下所示:
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
条件。
目标:收集击键动态数据(停留时间、飞行时间、下降到停机时间...)。
完成的事情: 成功获取两次击键之间的飞行时间
问题:当我快速打字时,我能够正确获得飞行时间,但停留时间混乱。
最小、完整且可验证的示例: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
问题:为什么会发生这种情况,应该如何解决?
错误的原因是,当快速输入时,keydown
可能会在 之前 触发前一个 keyup
。因此 dwellTime
可能尚未重置。
为了缓解这个问题,您可以在每个键代码的基础上存储 dwellTime
,以便它将 keydown
与给定键的 keyup
结合起来,如下所示:
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
条件。