用于捕获错过的keydown事件的Javascript

Question

免责声明：我不是一个真正的开发人员，所以我可能在这里有一些代码意大利面条。。。现在我需要处理我所拥有的，这意味着我最终可能会得到一个胶带式的修复。；-)

我使用Javascript和PHP来完成以下操作：

• 在屏幕上闪现一对图像
• "监听"并捕捉按键(指示左侧或右侧图像的特定按键)
• 重复10对图像

我通过让Javascript用图像对更改div的可见性，并调用事件侦听器来完成这一切，所有这些都是精确计时的。"捕获"部分是通过使用innerHTML将L或

R问题是，如果有人在机会之窗错过了按键，我无法注意到。因此，在流程结束时提交表格之前，我不计算记录的回复。

我希望它要么在10个图像对的末尾注意到，然后让用户重做会话，要么注意到错过了哪个图像对，然后自动重新显示该图像对。

这是我得到的代码，它可以使图像对闪烁并捕捉按键。

<script type="text/javascript">
var randomPairList = <?php echo $_POST['topicNumber']-1; ?>;
function imgChoice(imgPair)
{
var imgDataR = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="r" />';
var imgDataL = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="l" />';
var noData = '<?php $noData = 1; ?>';
$(document).on('keydown', function(event)
{
if (event.keyCode == 67 || event.keyCode == 37)
{
document.getElementById(imgPair+'Data').innerHTML = imgDataL;
$(document).unbind('keydown');
}
if (event.keyCode == 77 || event.keyCode == 39)
{
document.getElementById(imgPair+'Data').innerHTML = imgDataR;
$(document).unbind('keydown');
}
});
//div = document.getElementById(imgPair);
}
function stopChoice(imgPair)
{
$(document).unbind('keydown');
}
function flashImages()
{
i=500;
//$('#startTopic').fadeOut(500);
setTimeout("document.getElementById('fullpd').style.cursor='none';",50);
setTimeout("document.getElementById('fullpd').style.background='#464646';",500);
for(x=1;x<imgPairs.length;x++)
{
setTimeout("document.getElementById('clickSound').play();",i+2000);
setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="block";',i+3500)
setTimeout('imgChoice("'+imgPairs[x]+'");',i+3495)
setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="none";',i+4000)
setTimeout('stopChoice("'+imgPairs[x]+'");',i+6000)
i=i+4000;
}
setTimeout("document.getElementById('fullpd').style.background='#eaeaea';",i+1000)
setTimeout("document.getElementById('fullpd').style.cursor='default';",i)
setTimeout(function() {$('#endTopic').fadeIn(1000);},i+1000);
}
</script>

所以，我想知道是否有一种方法可以保持对event.keyCode的简单计数，以便在最后调用另一个函数来确保它总共记录了10个事件，如果不重新启动。。。或者一种专门跟踪哪个imagePair被遗漏，然后自动重新运行这些对的方法。

Answer 1

我找到了一种方法来实现我所需要的。。。

我在记录关键事件的函数中添加了一个计数器：

var randomPairList = <?php echo $_POST['topicNumber']-1; ?>;
var choicesMade = 0;
function imgChoice(imgPair)
{
var imgDataR = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="r" />';
var imgDataL = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="l" />';
var noData = '<?php $noData = 1; ?>';
$(document).on('keyup', function(event) {
if (event.keyCode == 67 || event.keyCode == 37) {
document.getElementById(imgPair+'Data').innerHTML = imgDataL;
$(document).unbind('keyup');
choicesMade+=1;
document.getElementById('choicesMade').innerHTML = choicesMade;
}
if (event.keyCode == 77 || event.keyCode == 39) {
document.getElementById(imgPair+'Data').innerHTML = imgDataR;
$(document).unbind('keyup');
choicesMade+=1;
document.getElementById('choicesMade').innerHTML = choicesMade;
}
});
}
function stopChoice(imgPair)
{
$(document).unbind('keyup');
}

然后，我更改了显示"endTopic"div的代码，使其在未达到所需选择数时选择不同的div来显示：

function flashImages(){
i=500;
//$('#startTopic').fadeOut(500);
setTimeout("document.getElementById('fullpd').style.cursor='none';",50);
setTimeout("document.getElementById('fullpd').style.background='#464646';",500);
for(x=1;x<=imgPairs.length-1;x++){
setTimeout("document.getElementById('clickSound').play();",i+2000);
setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="block";',i+3500)
setTimeout('imgChoice("'+imgPairs[x]+'");',i+3495)
setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="none";',i+4000)
setTimeout('stopChoice("'+imgPairs[x]+'");',i+6005)
i=i+4000;
}
setTimeout("document.getElementById('fullpd').style.background='#eaeaea';",i+1000)
setTimeout("document.getElementById('fullpd').style.cursor='default';",i)
setTimeout(function() {if(choicesMade < 10){$('#missedChoices').fadeIn(1000);} else {$('#endTopic').fadeIn(1000);}},i+1000);
//setTimeout(function() {$('#endTopic').fadeIn(1000);},i+1000);
}

然后，在"missedChoices"div中，用户会收到一条消息，表示他们错过了一些响应，并且该按钮可用于"返回"。

到目前为止，它似乎运行良好！：-)

Answer 2

使用keyup而不是keydown。

它将捕捉所有的关键笔划，不会像您所描述的那样错过任何一个。