Javascript Div绝对位置脚本-onkeyup甚至赢了'；t寄存器

我试着用箭头键做一个简单的动作脚本，但是我有一个奇怪的行为：

-如果我按向右键太长时间，圆圈就会快速向右移动

-如果我短按，脚本将按预期工作

-我假设长时间按右键是更新函数并使其以指数方式更新

-我仍然不知道为什么onkeyup在长时间按下后会停止注册

代码是：

var circle = document.createElement("div");
     circle.style.borderRadius = "50%";
     circle.style.width = "100px";
     circle.style.height = "100px";
     circle.style.position = "absolute";
     circle.style.backgroundColor = "#99CC00";
     circle.id = "green_circle";
     document.body.appendChild(circle);

var greenCircle = document.getElementById("green_circle");

//Movement Interval:
var xPosition = 1
function rightMovement(){
    circle.style.left = (xPosition + "px");
    xPosition++;
    console.log("xPosition is: "+xPosition);
}
//Interval Initializers and stoppers -
function moveRight(){
    startRight = setInterval(rightMovement,1);
}  

function stopMovingRight(){
    clearInterval(startRight);
    console.log("onkeyup stop register")
}

//Event Keybinding
document.onkeydown = function(){
    var r = event.keyIdentifier;
    if(r == "Right"){
    moveRight();
    }
}

document.onkeyup = function(){
    var i = event.keyIdentifier;
    if(i == "Right"){
        stopMovingRight();
        console.log(i);
    }
} 

---

当按下键时，您的代码会以多个间隔启动。使用布尔值检查圆是否已在移动

检查这个

---

您的方法

moveRight（）

被多次激发。这是因为按住某个键时会多次触发

onkeydown

事件。您可以通过设置一个键已按下的标志来解决此问题，这样

moveRight（）

就不会多次触发

每次调用

moveRight（）

，都会设置一个间隔。我还建议初始化脚本顶部的

startRight

变量，以确保不会出现任何错误。像这样：

var startRight = null;

---

如果你仔细看一下你的脚本，你会注意到，每一个按键都会增加一个新的间隔…哦，我的，这是很明显的，现在我觉得自己很笨，呵呵，谢谢！！

var startRight = null;