在 jquery 的第一个动画之后滞后

Question

我的目标是在您不断按下按钮时从一开始就保持动画流畅。是什么导致了第一个动画后的滞后？如何在一次只允许一个队列的情况下摆脱它？

function move() {
  var queue = jQuery.queue($("#hero")[0], "fx");

  if (queue.length < 2) {
    $('#hero').animate({
      width: '+=30px'
    }, {
      easing: 'linear',
      queue: false,
      duration: 200
    });
  }
}

$(document).keydown(function(e) {
  if (e.keyCode == 68) { //D Right
    $("#hero").queue(function() {
      move();
      $.dequeue(this);
    });
  }
});

<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>

Answer 1

在决定是否以及何时增加 #hero 宽度时，您不需要直接对按键做出反应，而是需要使用按键事件来跟踪在任何给定时刻按下的按键，然后检查基于 setTimeout() 的循环运行的关键状态独立于关键事件。

$(function() { // document.ready
  let keys = {};
  let object = $('#hero');

  $(document).keydown(function(event){
    keys[event.which] = true;
  }).keyup(function(event){
    delete keys[event.which];
  });
 
  function move() {
    if (keys[68]) {     // D key
        object.css("width", function(i,oldVal) { 
           return parseInt(oldVal) + 25 + "px"; 
        });
    }
  
   setTimeout(move, 20);
  }

  move();
 
});

#hero {
   transition-property: width;
   transition-duration: 0.2s;
   transition-timing-function: linear;
   transition-delay: 0s;
}

<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>

在 jquery 的第一个动画之后滞后

Lag after first animation with jquery

jquery

jquery-animate