javascript - requestAnimationFrame javascript警报增量从1跳到9或13

Question

我遇到了这个奇怪的问题，我递增了 1，但是，弹出 javascript 窗口时出现的增量显示我已递增了 9 或 13，这两者都来自于我是否分别增加 1 或 -1。这是怎么回事？

这是 requestAnimationFrame 调用的函数

function stream1() {
  if (y > origin_y){
    var xOffset = -1;
  } else if (y == origin_y){
    var xOffset = 1;
  } else {
    var xOffset = 1;
  }

  var offset = $( "#widget1" ).offset();
  var x = offset.left; 
  var y = offset.top;
  console.log(' X - '+x+' Y - '+y);
  $( "#widget1" ).offset({ top: y-yOffset, left: xInitial+xOffset });
}

这是动画帧

var globalID;
function repeatOften() {
  stream1();
  requestAnimationFrame(repeatOften);
}

在警报消失并重新出现的时间内，已经完成了 9 次迭代，这可能没有意义，对吧？应该是每秒 60 次，而它大约是 1 秒，所以不应该是 60 次而不是 9 或 13 次吗？我不知道这些任意数字从何而来。

再次总结一下，最初 xInitial 位于 1114 px，然后每次都会变为 1105 或 1103，然后依次出现 9 或 13 个间隙，这是为什么呢？

Answer 1

首先，避免帧回调中昂贵的操作。类似于 $( "#widget1").offset()。请注意，这是 DOM 操作，它可能会很慢并且会破坏所有计时。您可以在动画开始之前获取 DOM id 和偏移量，然后只记住当前的左侧和顶部偏移量。

其次，如果你想要 super 精确，你可以使用处理程序参数，它是时间戳，如果你存储动画开始时间戳，你可以计算精确的位置，而不管实际帧比率如何。