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

我有一个

setInterval

，它有一个可变计时器（实际上是一个递归的

setTimeout

），其间隔可以在5ms到1000ms之间，但不需要超过显示帧速率。当间隔接近显示帧速率（在我的例子中是16ms）时，我开始看到锯齿

因此，当我的时间间隔接近（在我的例子中）16毫秒时，我希望通过使用

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;
});

//我想查询这个值，而不是硬编码！
var最小帧时间=16.666；
var区间=[100]；
函数调用（f）{return f（）；}
调用（函数帧（）{
if（间隔[0]分钟\u帧\u时间）{
回调（）；
}
设置超时（计时器，间隔[0]）；
});
$（'#foo'）。单击（函数（）{
区间[0]=5+Math.random（）*1000；
});

---

我可以查询requestAnimationFrame rate（

MIN\u FRAME\u 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();

---

您必须自己测量帧之间的时间，因为帧速率会有很大差异（浏览器在有一些空闲资源时会调用它，因此不会在毫秒内重新渲染dom或其他内容），为什么不总是使用动画帧并自己可变地对其进行限制？如果你想知道

1/60

的最大值（总是这样），你可以在页面加载后花一秒钟（字面上）计算迭代次数。结果有点让我吃惊：我的计数可能已经结束了……你可以将

（new Date（））.getTime（）

写成

Date.now（）

。不知道速度，但它至少更短=）