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像素，然后每次都是1105或1103，然后是9或13个间隙，那么为什么呢？

Answer 1

首先，避免在帧回调中进行昂贵的操作。像$( "#widget1" ).offset()一样。请注意，它是DOM操作，它可能很慢并且打破了所有时间。您可以在动画开始之前获取DOM ID和偏移量，然后记住当前偏移量为left和top。

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

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

1 个答案: