功能仅在我缓慢键入时运行

Question

我正在尝试确定您在键入时按下某个键的时间。

这是我的 javascript:

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);
}

和我的html

<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()">

当我在文本框中输入时，一切正常，但由于某种原因，keyDownTimer 刚开始运行，好像 keydown() 不会运行。我知道我的代码有点难以阅读，但我很确定它是正确的。并且它应该运行正确。慢慢打字似乎对解决问题有一点帮助，但最终还是运行ning infinity。任何帮助，将不胜感激。如果你能解释为什么它在做什么，那就太好了。

Answer 1

您正在替换引用许多间隔的 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;
}

功能仅在我缓慢键入时运行

function only runs when I type slowly

javascript

setinterval

innerhtml

getelementbyid

onkeydown