在页面不可见时暂停的超时

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
}