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

Posted 2023-05-08

【中文标题】使用 jquery 的第一个动画后滞后

【英文标题】：Lag after first animation with 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>

【参考方案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>