javascript - 如何让这个 Action 更长而不停顿

Question

如果我想移动一个方 block ，我已经有了这段代码，它可以完美地工作，但是当我按住该键时，动画将起作用，但会出现这些暂停。我发现乘以速度和距离是可行的，但我不知道如何将这个“实时”添加到动画中。你能给我一些建议吗？

var Xpos = 0;
var Ypos = 0;
var spd = 250;
var dstnc = 100;

$(document).keydown(function(e) {
  if (e.keyCode == 87) {
    $('#movThs').animate({
      top: -dstnc + Ypos + 'px'
    }, spd);
    Ypos = Ypos - dstnc;
  }
  if (e.keyCode == 68) {
    $('#movThs').animate({
      left: dstnc + Xpos + 'px'
    }, spd);
    Xpos = Xpos + dstnc;
  }
  if (e.keyCode == 83) {
    $('#movThs').animate({
      top: dstnc + Ypos + 'px'
    }, spd);
    Ypos = Ypos + dstnc;
  }
  if (e.keyCode == 65) {
    $('#movThs').animate({
      left: -dstnc + Xpos + 'px'
    }, spd);
    Xpos = Xpos - dstnc;
  }
});

#movThs {
  background-color: #ff0000;
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 90%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="movThs"></div>

Answer 1

我不确定您希望实现的确切缓动行为，但让事情变得更顺畅的一个方便提示是在重新设置动画之前 stop() 。

最终以非离散定位结束；使用 stop()，您现在可以处于两个位置之间，这可能不是您想要的。它的作用是防止动画队列建立(不牺牲原始的平滑度)。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  #movThs {
    background-color: #ff0000;
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 90%;
  }
</style>

<div id="movThs"></div>
<script>
  var Xpos = 0;
  var Ypos = 0;
  var spd = 250;
  var dstnc = 100;

  $(document).keydown(function(e) {
    if (e.keyCode == 87) {
      $('#movThs').stop().animate({
        top: -dstnc + Ypos + 'px'
      }, spd);
      Ypos = Ypos - dstnc;
    }
    if (e.keyCode == 68) {
      $('#movThs').stop().animate({
        left: dstnc + Xpos + 'px'
      }, spd);
      Xpos = Xpos + dstnc;
    }
    if (e.keyCode == 83) {
      $('#movThs').stop().animate({
        top: dstnc + Ypos + 'px'
      }, spd);
      Ypos = Ypos + dstnc;
    }
    if (e.keyCode == 65) {
      $('#movThs').stop().animate({
        left: -dstnc + Xpos + 'px'
      }, spd);
      Xpos = Xpos - dstnc;
    }
  });
</script>