Cordova/PhoneGap:setInterval()/ setTimeout()无法正常工作

Question

我使用window.setInterval实现了一个简单的倒数计时器.它在我的桌面浏览器中运行良好,但在我的智能手机(Fairphone 2)上无法正常使用PhoneGap/Cordova应用程序.根据我的检查和我在互联网上的研究,当手机被发送到睡眠/待机状态时间隔/超时被中断.这就是为什么它不起作用.

令人惊讶的是,当我的手机通过usb线连接到我的电脑时,间隔/超时不会中断.所以这可能是一种导致不良行为的节能功能.

所以,我迷路了.我不知道如何实现我的简单倒计时器,当手机休眠时(=显示器关闭)当然也应该工作.window.setInterval()/ window.setTimeout()有替代方法吗？

这是我的简单代码(如上所述:window.setTimeout也不起作用):

...
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/libs/jquery.js"></script>
<script>
    var min = 25;
    $(document).ready(function(){
        intervalID = window.setInterval(function () {
            --min;
            if (min > 0) {
                $("#countdown").text(min);
            }
        }, 6000);
    });
</script>
...
<p id="countdown">0m</p>

Answer 1

仅使用间隔计时器更新显示.使用系统时间来决定要显示的内容.

然后,如果在显示不可见时没有调用间隔,则没有问题.下次调用时(再次打开显示),它将从系统时间计算正确的经过时间,并将正确显示.

出于这个原因(以及其他几个),你永远不应该认为这setInterval()将保持完美的时间.在Javascript中,它只是意味着您希望每隔一段时间调用一次,然后您可以设置指定频率的大致时间,但间隔可能会长时间关闭.

获取间隔开始时的时间Date.now(),然后每次间隔触发时,获取新系统时间并从开始时间减去以查看已经过了多长时间,然后计算要显示的内容.

如果你想在25分钟的计时器上显示剩余的分钟数,你可以这样做:

function showTimer(selector, minutes) {
  var startTime = Date.now();
  var interval;

  function showRemaining() {
    var delta = Date.now() - startTime;     // milliseconds
    var deltaMinutes = delta / (1000 * 60);
    if (deltaMinutes < minutes) {
      // display minutes remaining
      $(selector).text(Math.round(minutes - deltaMinutes));
    } else {
      $(selector).text(0);
      clearInterval(interval);
    }
  }

  interval = setInterval(showRemaining, 15 * 1000);
  showRemaining();
}

$(document).ready(function(){
  showTimer("#countdown", 25);
});

工作演示:https://jsfiddle.net/jfriend00/807z860p/