jQuery连续触发动画时首次动画后出现卡顿的问题如何解决

• 队列长度判断逻辑完全失效：你给animate方法设置了queue: false，这意味着执行的动画根本不会进入jQuery默认的fx队列，你代码中检查queue.length的限制逻辑完全起不到作用。
• 系统按键触发机制导致断档：按住按键时，keydown事件的首次触发和后续连续触发之间存在系统级的重复延迟，这段延迟内没有新的事件触发，就会出现首次动画跑完后没有后续动画衔接的卡顿。
• 队列任务冗余堆积：每次keydown触发都会往fx队列插入新的队列任务，即使当前动画还在执行，堆积的队列也会导致后续执行顺序混乱，进一步加重卡顿。

核心逻辑改为用状态标记记录按键按下状态，不依赖keydown的连续触发驱动动画，而是通过动画完成回调自动调度下一次移动，同时严格控制队列长度保证同一时间最多只有1个动画执行。

// 标记D键是否处于按下状态
let isDPressed = false;

function move() {
  const queue = jQuery.queue($("#hero")[0], "fx");
  // 仅当队列为空且按键仍按住时才执行新动画
  if (queue.length === 0 && isDPressed) {
    $('#hero').animate({
      width: '+=30px'
    }, {
      easing: 'linear',
      duration: 200,
      // 上一段动画跑完后自动触发下一段，避免断档
      complete: move
    });
  }
}

$(document).keydown(function(e) {
  if (e.keyCode == 68 && !isDPressed) { //D Right
    isDPressed = true;
    // 首次按下时启动动画
    move();
  }
});

$(document).keyup(function(e) {
  if (e.keyCode == 68) {
    isDPressed = false;
    // 松开按键时清空队列终止后续动画
    $("#hero").stop(true);
  }
});

配套HTML代码保持原有逻辑即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hero" style="width:10px;height:30px;left:0px;background-color:red;">
</div>

内容的提问来源于stack exchange，提问作者ArcziProgramuje