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（）不会运行一样。我知道我的代码有点难以阅读，但我很确定它是正确的。它应该正常运行。慢慢打字似乎有点帮助问题，但它仍然最终运行无限。任何帮助，将不胜感激。如果你能解释为什么它做它做的事情，那就太好了。

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

函数仅在我慢慢输入时运行

1 个答案: