2016-11-23 28 views
0

입력 할 때 키를 누르는 시간을 확인하려고합니다. 여기 입력 할 때만 기능이 느리게 실행됩니다.

내 자바 스크립트입니다 :

var keyDownTimer = 0; 
var keyUpTimer = 0; 
var keyPressedCounter = 0; 
var dt; 
var keyDownDisplay = document.getElementById("keyDownTimer"); 
var keyPressedDisplay = document.getElementById("keyPressed"); 
keyDownDisplay.innerHTML = keyDownTimer; 
keyPressedDisplay.innerHTML = keyPressedCounter; 
function keypressed(){ 
keyPressedCounter++; 
    keyPressedDisplay.innerHTML = keyPressedCounter; 
} 
function keydown(){ 
    dt = setInterval(addDownTime, 1); 
} 
function addDownTime(){ 
    keyDownTimer++; 
    keyDownDisplay.innerHTML = keyDownTimer/1000; 
} 
function keyup(){ 
    clearInterval(dt); 
} 

<style> 
     div{ 
     height:25px; 
     width:100px; 
     display:inline-block; 
     margin-right:10px; 
     } 
    </style> 
</head> 
<body> 
<div id="keyUpTimer"></div><div id="keyDownTimer"></div><div id="keyPressed"></div> 
<input id="textBox" type="text" onkeyup="keyup()" onkeydown="keydown()" onkeypress="keypressed()"> 

내가 텍스트 상자에 입력하고 나의 HTML, 모든 것이 제대로 작동하지만 다음 몇 가지 이유로 keyDownTimer는에 시작 마치 keydown()이 실행되지 않는 것처럼 실행됩니다. 코드를 읽는 데 조금 어려움을 안고 있지만 정확한지 확신합니다. 제대로 작동해야합니다. 천천히 타이핑하면 약간의 문제를 해결하는 것처럼 보이지만, 여전히 무한대로 돌아갑니다. 도움이 될 것입니다. 왜 그 일을하는지 그 이유를 설명 할 수 있다면 그것은 좋을 것입니다.

+0

은 무엇 (보류) A는 다음 B를 눌러 다음 모두 해제 발생합니다

이 시도? 이것은 자주 타이핑 할 때 자주 발생하는 것입니다. (이 경우'dt '가 어떻게 될지 생각하십시오!) – psmears

답변

0

많은 간격을 참조하는 dt 변수가 바뀝니다.

동시에 여러 키를 누른 경우 첫 번째 키 다운의 dt가 두 번째 키와 같이 바뀌는 등의 문제가 있습니다. 당신이 누르면

var dt = 0; 
... 
function keydown(){ 
    if(dt == 0){ 
    dt = setInterval(addDownTime, 1); 
    } 
} 
function addDownTime(){ 
    keyDownTimer++; 
    keyDownDisplay.innerHTML = keyDownTimer/1000; 
} 
function keyup(){ 
    clearInterval(dt); 
    dt = 0; 
}