Javascript 如何在不停顿的情况下延长移动时间

我有这个代码，如果我想移动一个块，它可以很好地工作，但是当我按住键的时候，动画会工作，但是会暂停。我知道倍增速度和距离是可行的，但我不知道如何在动画中加入这种“实时”效果。你能给我一些建议吗

var Xpos=0；
var-Ypos=0；
var-spd=250；
var-dstnc=100；
$（文档）.keydown（函数（e）{
如果（e.keyCode==87）{
$（'#movThs'）。设置动画({
顶部：-dstnc+Ypos+“px”
}，spd）；
Ypos=Ypos-dstnc；
}
如果（e.keyCode==68）{
$（'#movThs'）。设置动画({
左：dstnc+Xpos+‘px’
}，spd）；
Xpos=Xpos+dstnc；
}
如果（e.keyCode==83）{
$（'#movThs'）。设置动画({
顶部：dstnc+Ypos+‘px’
}，spd）；
Ypos=Ypos+dstnc；
}
如果（e.keyCode==65）{
$（'#movThs'）。设置动画({
左：-dstnc+Xpos+“px”
}，spd）；
Xpos=Xpos-dstnc；
}
});
#移动{
背景色：#ff0000；
宽度：100px；
高度：100px；
位置：相对位置；
边界半径：90%；
}
我不确定您希望实现的确切放松行为，但让事情变得更顺利的一个方便提示是在重新设置动画之前停止（）

最终实现非离散定位；使用stop（），您现在可以处于两个位置之间，这可能不是您想要的。它所做的是防止动画队列累积（而不牺牲原始平滑度）



#动作{
背景色：#ff0000；
宽度：100px；
高度：100px；
位置：相对位置；
边界半径：90%；
}
var-Xpos=0；
var-Ypos=0；
var-spd=250；
var-dstnc=100；
$（文档）.keydown（函数（e）{
如果（e.keyCode==87）{
$（'#movThs'）.stop（）.animate({
顶部：-dstnc+Ypos+“px”
}，spd）；
Ypos=Ypos-dstnc；
}
如果（e.keyCode==68）{
$（'#movThs'）.stop（）.animate({
左：dstnc+Xpos+‘px’
}，spd）；
Xpos=Xpos+dstnc；
}
如果（e.keyCode==83）{
$（'#movThs'）.stop（）.animate({
顶部：dstnc+Ypos+‘px’
}，spd）；
Ypos=Ypos+dstnc；
}
如果（e.keyCode==65）{
$（'#movThs'）.stop（）.animate({
左：-dstnc+Xpos+“px”
}，spd）；
Xpos=Xpos-dstnc；
}
});
变量
spd
实际上是操作完成所需的时间

变量
dstnc
是在所述操作时间内行驶的距离

我的答案如下，有
spd
，这确实是10毫秒的操作时间



#动作{
背景色：#ff0000；
宽度：100px；
高度：100px；
位置：相对位置；
边界半径：90%；
}
var-Xpos=0；
var-Ypos=0；
var-spd=10//所需的时间量（毫秒）
var-dstnc=100//要移动的距离（像素）
$（文档）.keydown（函数（e）{
如果（e.keyCode==87）{
$（'#movThs'）。设置动画({
顶部：-dstnc+Ypos+“px”
}，spd）；
Ypos=Ypos-dstnc；
}
如果（e.keyCode==68）{
$（'#movThs'）。设置动画({
左：dstnc+Xpos+‘px’
}，spd）；
Xpos=Xpos+dstnc；
}
如果（e.keyCode==83）{
$（'#movThs'）。设置动画({
顶部：dstnc+Ypos+‘px’
}，spd）；
Ypos=Ypos+dstnc；
}
如果（e.keyCode==65）{
$（'#movThs'）。设置动画({
左：-dstnc+Xpos+“px”
}，spd）；
Xpos=Xpos-dstnc；
}
});
<>代码> 如果您不考虑使用jQuery而是纯JS，我建议尝试下面的代码片段。
问候


document.addEventListener（“DOMContentLoaded”，（）=>{
if（document.animationInitialized）{
返回；
}
document.animationInitialized=true；
const movThs=document.getElementById（“movThs”）；
const UP=“W”。charCodeAt（0）；
const DOWN=“S”。charCodeAt（0）；
const RIGHT=“D”。charCodeAt（0）；
const LEFT=“A”。charCodeAt（0）；
常数XMAX=50；
常数YMAX=50；
设x=0；
设y=0；
设ax=0；
设ay=0；
设cx=0；
设cy=0；
功能夹（v、最小值、最大值）{
返回vmax？max:v；
}
requestAnimationFrame（函数onAnimation（）{
如果（！x）{
如果（ax）{
ax+=-数学符号（ax）；
}
}否则{
ax+=x；
ax=夹具（ax，-XMAX，XMAX）；
}
cx+=ax/100；
如果（！y）{
如果（是）{
ay+=-数学符号（ay）；
}
}否则{
ay+=y；
ay=夹具（ay，-YMAX，YMAX）；
}
cy+=ay/100；
movThs.style.transform=`translate3d（${cx}rem，${cy}rem，0）`
window.requestAnimationFrame（onAnimation）；
});
document.addEventListener（“键控”，事件）=>{
开关（event.which）{
个案：
y=-1；
打破
案例左：
x=-1；
打破
案例权利：
x=1；
打破
按大小写：
y=1；
打破
}
}，假）；
document.addEventListener（“键控”，事件）=>{
开关（event.which）{
个案：
按大小写：
y=0；
打破
案例左：
案例权利：
x=0；
打破
}
}，假）；
});
如果（document.readyState==“完成”）{
文件。dispatchEvent（新事件（“DOMContentLoaded”）；
}
#移动{
背景色：#ff0000；
宽度：100px；
高度：100px；
位置：相对位置；
边界半径：90%；
}