Safari 在后台选项卡中延迟 setInterval / setTimeout（间隔 > 1000ms）

请注意，当页面位于后台选项卡中时，Safari 10.0.3 会延迟我的代码。

var interval = 2000;
var scriptTime = new Date().getTime();
function addTime(){
    scriptTime += interval;
    document.getElementById('output').innerHTML = "Current state: scripts delayed by "+(new Date().getTime()-scriptTime)+"ms";
}
setInterval(addTime, interval);

在这里试试：https://jsfiddle.net/rhrrsgrf/4/ https://jsfiddle.net/rhrrsgrf/4/

发现了一些小间隔优化的确认，但没有任何关于大于 1 秒的计时器的信息（仍然希望这只是一个错误......）。 Chrome 56 似乎有类似的东西（https://www.ghacks.net/2017/01/25/chrome-to-throttle-expense-background-timers/ https://www.ghacks.net/2017/01/25/chrome-to-throttle-expensive-background-timers/），但不影响我的代码。

还有其他简单的解决方案可以向服务器发送 ping（30 秒）吗？

我发现有一个Worker处理后台线程有一定帮助。创建另一个 JavaScript 文件：

// worker.js
const poll_url = "https://stackoverflow.com/"
setInterval(function() {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200)
            self.postMessage(xhr.responseText);
    };
    xhr.open("GET", poll_url, true);
    xhr.send(null);
}, 5000);

在你的主代码中：

let worker = new Worker("worker.js");
worker.onmessage = function (data) {
    // handle your poll response here
};

这将防止任何指数时间跳跃。在 Safari 中，我见过最多 4 秒的延迟峰值，但从未见过持续的延迟。对于两次投票之间超过 5 秒的时间，这对我来说效果很好。

我观察到，在 Chrome、Firefox 和 Opera 中这一切都完美。只要工作人员的功能要求不太高（轮询就可以），就不会出现明显的延迟。在 Safari 中，我通常预计早期会出现最多 4 秒的延迟峰值，可能是因为它切换到后台，然后变得一致。

如果您需要赶上潜在的延迟，您可以使用递归setTimeout并从下一个中减去延迟timeout通过跟踪最后一个请求的发送时间来获取值。