如何处理通过箭头键使用位置属性移动 div 时出现的故障？

Question

上下文：
我正在尝试使用箭头键实现 div 的平滑移动（顶部、左侧、底部、右侧）。

问题：

如上图所示，div 的移动有点问题，我尝试使用 lodash throttle 这似乎是使它看起来平滑的正确方法，但它似乎并没有解决问题，不确定我哪里出错了，任何建议都会有所帮助。

DemoRef -throttle vs debounce vs regular

代码

   move: throttle(function (type) {
       if (type === "up") {
               this.moveUp(0);
       } else if (type === "down") {
               this.moveDown(0);
       } else if (type === "left") {
               this.moveLeft(0);
       } else if (type === "right") {
               this.moveRight(0);
     }
   }, 500),

到目前为止我尝试过的 --> Codesandbox

Answer 1

这似乎与您的键盘重复率有关。当你按住一个键时它会触发，然后在你的 OS 中设置一定的延迟后它会一次又一次地触发。第一次和第二次触发之间的延迟可能不同于所有后续重复之间的延迟。你想要做的是让盒子在屏幕上平滑地动画，但是如果你在它的位置上添加或减去 10px 以响应按键触发，你将得到这种行为。我认为获得完全一致的动作并不容易，因为您需要对用户的键盘重复率做出假设。您可以尝试添加一个 CSS 过渡来平滑它，但它仍然可能无法提供最佳结果。

我的建议是监听 keydown 和 keyup 事件，并添加一个循环（可能使用 requestAnimationFrame 在按键按下时为 div 设置动画。一旦按键被抬起，你停止动画。

如何处理通过箭头键使用位置属性移动 div 时出现的故障？

How to handle glitch while moving div using position attributes via arrow keys?

javascript

css

move

smoothing