使用 jquery 的第一个动画后滞后答案

【问题标题】：Lag after first animation with jquery使用 jquery 的第一个动画后滞后
【发布时间】：2021-12-25 14:02:06
【问题描述】：

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

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>

【问题讨论】：

标签： jquery jquery-animate

【解决方案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>

【讨论】：