当我按住某个键(在本例中为向左或向右箭头)时，我试图使元素移动，但是当我按住某个键时，移动会延迟大约一秒。我是否使用了错误的事件或者我的代码有什么问题？
我使用 onKeyDown 事件来触发移动。
<head>
<script>
var objX = 100;
function blockMove(e){
if (e.keyCode == 37) { //move left
objX-=4;
document.getElementById("object").style.left = objX + "px";
} else if (e.keyCode == 39) { //move right
objX+=4;
document.getElementById("object").style.left = objX + "px";
}
}
</script>
</head>
<body onkeydown="blockMove(event)">
<div id=object style="height:10px;width:80px;background-color:red;position:absolute;top:50px;left:100px"></div>
</body>最佳答案
而不是依赖用户的键盘重复率，这才是最终导致多次调用 blockMove 的原因。 ，您应该使用计时器来检查对象是否应以一致的速率移动(在下面的示例中每 20 毫秒一次)。这意味着无论重复率设置如何，所有用户都将获得一致的体验。
然后您需要跟踪对象是否应该移动。通过使用keydown和keyup事件，我们可以跟踪当前是否按下左键和右键，然后只需检查现有 blockMove 中的这些值功能:
//object to keep current state of keys
var keys = {
left: false,
right: false
};
function keydown(e) {
//remember "down" state
if (e.keyCode == 37)
keys.left = true;
if (e.keyCode == 39)
keys.right = true;
}
function keyup(e) {
//forget "down" state
if (e.keyCode == 37)
keys.left = false;
if (e.keyCode == 39)
keys.right = false;
}
var objX = 100;
function blockMove(){
//now check the key state, rather than the event object
if (keys.left) { //move left
objX -= 4;
}
if (keys.right) { //move right
objX += 4;
}
document.getElementById("object").style.left = objX + "px";
}
//Call the movement function every 20ms
window.setInterval(blockMove, 20);<body onkeydown="keydown(event)" onkeyup="keyup(event)">
<div id=object style="height:10px;width:80px;background-color:red;position:absolute;top:50px;left:100px"></div>
</body>正如下面评论中所讨论的，setInterval仅保证调用函数之前的最短时间，并且可能受到限制。除了移动 DOM 对象之外，学习这样的基础知识也很好，但在某些时候您可能想看看 drawing directly onto <canvas> 元素并使用 requestAnimationFrame 用于处理回调，因为它是为动画设计的，与 setTimeout 不同/setInterval .
关于javascript - 当我使用 onKeyDown 事件时，移动元素会延迟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33762362/