javascript - Safari 和 requestAnimationFrame 获取 DOMHighResTimestamp； window.performance 不可用

Question

我使用 requestAnimationFrame 创建了一个动画。在 Windows Chrome 和 IE 中运行良好； Safari(已测试 Safari 6 和 7)中断。事实证明，rAF 得到的是 DOMHighResTimestamp 而不是 Date 时间戳。这一切都很好，而且是我所期望的，因为它现在是规范的一部分。但是，据我所知，无法获取当前的 DOMHighResTimestamp(即 window.performance 不可用，即使有前缀)。因此，如果我将开始时间创建为 Date 时间戳，当我尝试在 rAF 回调(非常小的负数)中确定进度时，它的行为完全错误。

如果你看this Safari 上的 JSBin，它根本不会动画。

在this JBin，我更改为“跳过”第一帧(其中 time 参数为 undefined)，以便设置 startTime到下一帧的 time 参数。似乎可行，但跳过一帧似乎有点糟糕。

鉴于缺少 window.performance，是否有一些方法可以在 Safari 中获取当前的 DOMHighResTimestamp？或者，强制 rAF 进入某种强制其获取日期时间戳的旧模式？

有谁知道为什么 Safari 会出现这种不一致的情况，它以一种您无法通过任何其他方式获得的格式提供参数？

Answer 1

Performance.now() 目前只是一个建议。 https://developer.mozilla.org/en-US/docs/Web/API/Performance.now()我只能假设它正式发布只是时间问题，看看除了 Safari 之外的每个人都是如何内置它的。

除此之外，利用这一优势。由于您知道 requestAnimationFrame 会返回一个 DOMHighResTimestamp，因此请将其用于您的计时。

Game.start = function(timestamp){
    if(timestamp){
        this.time = timestamp;
        requestAnimationFrame(Game.loop);
    }else{
        requestAnimationFrame(Game.start);
    }
}

Game.loop = function(timestamp){
    Game.tick(timestamp);
    ... your code
    requestAnimationFrame(Game.loop);
}

Game.tick = function(timestamp) {
    this.delta      = timestamp - this.time;
    this.time       = timestamp;
};

我在这里所做的是调用 Game.start 来开始循环(我遇到过时间戳未定义的情况，所以我们会尝试直到得到有效的东西)。一旦我们得到了我们的基准时间，并且由于 RAF 将返回一个时间戳，我们的 tick 函数永远不必调用 Date.now 或 performance.now，只要我们将 requestAnimationFrame 返回的时间戳传递给它即可。