javascript - ionic 应用程序中的计时器(setInterval)在后台运行一段时间后进入休眠状态

Question

我的 ionic 应用程序有一个计时器(一个简单的 setInterval，每秒滴答一次)，当应用程序位于前台时，它工作得很好。然而，当应用程序进入后台并在 10 分钟后返回前台时，应用程序中显示的时间是错误的(时间比应该的少得多)。我试过将计时器添加到指令中并使用 native DOM 操作 api(document.getElementById 等)方法，但它们都不起作用。我认为当应用程序进入后台时， ionic 框架正在对 View 和绑定(bind)做一些事情。有没有人遇到过这样的问题？如果遇到过，你们是如何解决的？

Answer 1

经过几个小时的寻找答案，我终于想出了自己的 hack。我希望这个解决方案可以帮助遇到类似问题的其他人。

当应用程序进入后台时，在某个随机时间，计时器停止计时并进入休眠状态，直到应用程序返回前台。当应用程序出现在前台时，计时器会从它进入休眠状态的那一刻开始再次计时。

解决方案/技巧:

1. 将时间戳记录在一个单独的变量中(以秒为单位)，并在计时器的每个时间间隔内更新它。

   var timeStamp = Math.floor(Date.now()/1000);

2. 如果您之前间隔的时间戳与最新(新)时间戳之间的差异大于一秒，则检查计时器的每个间隔。如果满足条件，则将这两个时间戳之间的差异添加到您的滴答时间。

工作原理:

应用在前台

1. 就在计时器开始计时之前
   - 记录的时间戳(假设 1 秒)
2. 计时器开始计时
   - 检查条件
如果(当前时间戳 - 前一个时间戳 > 1)
{
将上述差值加到时间上
}
在间隔结束之前，使用 currentTimeStamp 更新 TimeStamp 变量。

   在第一个间隔中，currentTimeStamp 应该是 1 秒或 2 秒，具体取决于您将计时器卸载到 setTimeout 中的天气。因此，差异肯定是 0 或 1。由于条件不匹配，我们将时间戳更新为 1 或 2 秒，然后继续下一个间隔。只要计时器不进入休眠状态，我们的条件就会失败。
   

后台应用

奇怪的是，10 分钟后，计时器进入休眠状态(我们的计时器实际上正在失去对现在时间的跟踪，因为下一个间隔没有触发)。

应用从后台返回前台

计时器从它停止的地方开始计时(即下一个间隔)。现在我们的条件差异应该超过一秒，因此将这个差异(基本上是损失的时间)加到我们当前的滴答时间上。

代码:

var transactionTime = 0; //Initial time of timer
var timeStamp = Math.floor(Date.now() / 1000);
var deltaDelay = 1;

setInterval(function () {
    if (transactionTime != 0 && (Math.floor(Date.now() / 1000) - timeStamp) > deltaDelay) {
            transactionTime += (Math.floor(Date.now() / 1000) - timeStamp);
        }
        timeStamp = Math.floor(Date.now() / 1000);

        //Update your element with the new time.
        window.document.getElementById("transaction_timer").innerHTML = util.formatIntoHHMMSS(transactionTime++);

    }, 1000);

注意:这个解决方案可以独立工作(带有原生 DOM api 的 vanilla Js)并且在 Angular Directive(指令)中也很好用。
如果您的单个线程有可能在其他地方忙于其他任务，您可以将上述代码的 deltaTime 增加到 2 以更加准确。
P.s 我实际上是在我自己的 webview 实例中运行 ionic 应用程序而不是 cordova，所以我不能使用任何花哨的 cordova 插件。