javascript - 同步 setInterval 和 transition 的正确方法

Question

问题陈述

点击按钮沿着视口(viewport)的周边移动正方形，如示例所示:

https://codepen.io/vineetrok/pen/XRowdB

我需要什么？

我将此代码与 CSS 中的 transition 属性结合使用。我认为 transition 和 setInterval() 的组合会导致延迟。是否有更好、更有效的方法来仅使用 javascript 来完成此任务？

以下是我的代码:

HTML

 <div class="box" style="left:0;top:0"></div>
  <button type="button" name="button" onclick="init()">Start!</button>

CSS

.box{
transition: all 1s linear;
}

JS

var elem = document.querySelector(".box");
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
var dimension = elem.clientWidth;
var deltaX = viewportWidth - dimension;
var deltaY = viewportHeight - dimension;

function move(x,y){
  if(x <=0 && y==0){
    elem.style.left=(deltaX)+"px";
  }
  else if(x==(deltaX) && y==0){
    elem.style.top=(deltaY)+"px";
  }
  else if(x==(deltaX) && y==(deltaY)){
    elem.style.left="0px";
  }
  else if(x==0 && y==(deltaY)){
    elem.style.top="0px";
  }

}

function getCoordinates(elem){
  return {
    x: elem.getBoundingClientRect().left,
    y: elem.getBoundingClientRect().top
  }
}

var init = function(){
  var clearTimer = 1;
  var startTimer = setInterval(function(){ 
    move(getCoordinates(elem).x,getCoordinates(elem).y )
    }, 1000);
      clearTimer++;
      if(clearTimer>=4){
        clearInterval(startTimer);
      }
    }

Answer 1

我通常会说同时使用 css 和 javascript 来管理转换会造成麻烦。部分问题是 javascript 计时器不是很精确。如果您将计时器设置为 1 秒，它实际上不会休眠一秒钟。它休眠的确切时间取决于 CPU 的繁忙程度、用户正在做什么等。javascript 计时器很容易比 CSS 动画花费更长的时间。

因为您使用的是 jQuery，所以我会使用 jQuery.animate 函数来运行。它有一个在动画完成时调用的回调函数，您可以使用它来执行动画的下一步，而无需任何计时器。这将确保没有任何延误。它还应该是相当的性能。就计算机性能而言，CSS 动画通常是最慢的，所以我希望 jQuery.anmiate 可能会好一点。还有其他为高性能动画设计的库，但除非性能真的成为一个问题，否则我不会担心它。现在您的问题可能是超时方法的时间不精确，而不是任何性能问题。