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/

Answer 2

我发现了一个cordova插件，即使显示屏关闭也会执行超时/间隔：

cordova-plugin-timers（在github上）

jfriend00的回答也很有用。

Cordova / PhoneGap：setInterval（）/ setTimeout（）无法正常工作

2 个答案: