我可以查询requestAnimationFrame帧速率上限吗

Can I query the requestAnimationFrame frame rate cap?

本文关键字：帧速率 查询 requestAnimationFrame 我可以      更新时间：2023-09-26

我有一个setInterval，它有一个可变定时器（实际上是递归setTimeout），其间隔可能在5ms到1000ms之间，但它不需要比显示帧速率快。当间隔接近显示帧速率（在我的情况下是16ms）时，我开始看到混叠。

因此，当我的间隔接近（在我的情况下）16ms时，我想切换到通过搭载requestAnimationFrame来与帧速率同步。类似地，当间隔超过（在我的情况下）16ms时，我想切换回setInterval。我可以硬编码逻辑，但它不适用于其他显示器。非常粗略：

// I would like to query this value, not hard code it!
var MIN_FRAME_TIME = 16.666;
var interval = [100];
function call(f) { return f(); }
call(function frame() {
  if (interval[0] <= MIN_FRAME_TIME) {
    callback();
  }
  draw();
  requestAnimationFrame(frame);
});
call(function timer() {
  if (interval[0] > MIN_FRAME_TIME) {
    callback();
  }
  setTimeout(timer, interval[0]);
});
$('#foo').click(function () {
  interval[0] = 5 + Math.random() * 1000;
});

我可以查询requestAnimationFrame速率（上面的MIN_FRAME_TIME）吗？或者，我必须在原地测量吗？

requestAnimationFrame已经达到每秒60帧左右。但如果你真的需要手动完成，你可以这样做：

var TARGET_FRAME_RATE = 16.666;
var prevTime;
var frame = function () {
    var time;
    draw();
    time = Date.now();
    if (!prevTime || time - prevTime >= TARGET_FRAME_RATE) {
        prevTime = time;
        requestAnimationFrame(frame);
    } else {
        setTimeout(function () {
            requestAnimationFrame(frame);
        }, TARGET_FRAME_RATE - (time - prevTime));
        prevTime = time;
    }
};
frame();
相关文章：