Question

我有一个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以上）吗？或者，我是否必须在原地进行测量？

Answer 1

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

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

1 个答案: