Angular 4 RXJS Observable .interval() 无法在后台工作

Question

我有一个简单的计时器可观察对象，当计时器在我的应用程序中启动时会订阅它。它运行良好，但如果选择了另一个浏览器选项卡，则计时器会停止，直到再次选择应用程序的选项卡。

public timer = Observable
  .interval(100)

有没有办法让我在选项卡在后台时保持可观察的运行？

更新

我简单地研究过将其作为 Web Worker 运行，但很快就开始了解将 Web Worker 集成到 Angular 项目中的困难。

因此，目前我使用简单的解决方案，即获取计时器的开始时间并从当前时间中减去该时间以获得计时器运行持续时间。这样，当选项卡再次变为事件状态时，计时器将自行纠正。

我确实希望页面标题显示计时器计数，这样只需查看选项卡就可以看到它，所以我仍然希望找到更好的解决方案来解决这个问题。

Answer 1

Chrome 后台的选项卡在性能方面可以执行的操作数量受到严格限制。请参阅 Chrome 团队的这篇博文:https://developers.google.com/web/updates/2017/03/background_tabs

Shipping in Chrome 57, budget-based timer throttling is a further extension of the timer alignment mechanism, placing an additional limit on background timer CPU usage. It operates as follows:

• Each background tab has a time budget (in seconds) for running timers in the background.
• A page is subjected to time budget limitations after 10 seconds in the background.
• A timer task is allowed to run only when the time budget is non-negative.
• After a timer has executed, its run time is subtracted from the budget.
• The budget continuously regenerates with time (currently set to a rate of 0.01 seconds per second). Note that this budget regeneration rate can be tweaked as Chrome collects more data about throttling behavior.

因此，由于 CPU 周期的预算限制，在后台运行每 100 毫秒一次的计时器不会显着减慢工作速度。