requestAnimationFrame回调中的参数到底是什么?

本教程将介绍requestAnimationFrame回调中的参数到底是什么?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

requestAnimationFrame回调中的参数到底是什么? 教程 第1张

问题描述

只需运行此命令:

function requestAndDraw() {
  requestAnimationFrame((t) => {
 console.log(`T: ${t} P.now:${performance.now()}`);
  });
}

intId = setInterval(requestAndDraw, 20);
setTimeout(() => clearInterval(intId), 1000);

它打印如下内容:

T: 1164.656 P.now:1176.300000000083

我想知道相差12ms的原因是什么?
执行向requestAnimationFrame注册的其他回调需要一些时间吗?只是和解释js有关的一些开销?不然呢?在这种情况下,12ms不是我要扔掉的东西。

推荐答案

参数是DOMHighResTimeStamp,就像Performance.now应该返回的一样,即使它不是此方法返回的参数。


因此,首先让我们解释一下您所看到的精度差异:最近在大多数CPU中发现了一个重大安全问题,其名称为Meltdown and Spectre。
这些攻击可以从Web浏览器发起,但需要返回的。Firefox发现,一个快速修复/"缓解"的方法是降低的分辨率。

由于回调计划激发下一帧(即,在上次调用后约16ms),从此方法传递的DOMHighResTimeStamp不需要此,因此您在this中仍具有完全精度。


现在回答标题的问题,传入requestAnimationFrame的回调的DOMHighResTimeStamp表示该帧所有回调堆栈的调用时间。
实际上,只将回调参数存储在堆栈中,然后在帧发生时(就在下一个操作之前)调用此堆栈。
这意味着同一帧的所有回调将共享完全相同的,而不考虑上一次回调花费了多长时间。

function long(time){
  var now = performance.now();
  console.log('long');
  console.log({
 'rAF time': time,
 'Performance time': now,
 'diff': (now - time) + 'ms'
  });
  console.log('________________________');
  // wait 50ms
  while(performance.now() - time < 50) {
  }
}
function short(time) {
  var now = performance.now();
  console.log('short');
  console.log({
 'rAF time': time,
 'Performance time': now,
 'diff': (now - time) + 'ms'
  });
}
// our two functions will be stacked together to fire in the same frame
requestAnimationFrame(long);
requestAnimationFrame(short);

好了关于requestAnimationFrame回调中的参数到底是什么?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。