javascript - 页面不可见时暂停的超时

Question

我想要一个与 setTimeout 类似的计时器 API，但不同之处在于当页面不活动/不可见时计时器会暂停。

setActiveTimeout(function(){ alert('hi') }, 10000);

换句话说，如果用户在计时器前五秒切换到另一个选项卡，等待一小时，然后切换回来，他们会在切换回来五秒后收到警报。

原因是，a) 节省 CPU 周期，b) 当用户返回到包含异步定期更新的页面时，不会出现“堆积”行为。

我想我可以尝试使用新的页面可见性 API 或 requestAnimationFrame() 或它们的某种组合来构建一个执行此类操作的库，但这似乎很复杂，我希望有人可能知道一个简单的解决方案，或者执行此操作的库。

谢谢。

Answer 1

我会尝试在blur事件中停止计数器，然后重新启动focus：

window.onfocus = function(e) {
    // restart counter
    // I recommend setInterval
}

window.onblur = function(e) {
    // stop counter
    // with clearInterval
}