使用Javascript来捕获错过的keydown事件

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’分区，用户给出的消息他们错过了一些回应，并且该按钮可用于'返回'。

到目前为止，它似乎工作正常！ :-)

Answer 2

使用KEYUP代替KEYDOWN。

它会捕获所有关键笔划，并且不会像您所描述的那样错过任何关键笔划。