相关疑难解决方法(0)

我setInterval每秒运行一段代码30次.这很好用,但是当我选择另一个选项卡(以便我的代码的选项卡变为非活动状态)时,由于setInterval某种原因将其设置为空闲状态.

我做了这个简化的测试用例(http://jsfiddle.net/7f6DX/3/):

var $div = $('div');
var a = 0;

setInterval(function() {
    a++;
    $div.css("left", a)
}, 1000 / 30);

如果您运行此代码然后切换到另一个选项卡,等待几秒钟然后返回,动画将继续在您切换到另一个选项卡时的位置.因此,如果选项卡处于非活动状态,则动画不会每秒运行30次.这可以通过计算setInterval每秒调用函数的次数来确认- 如果选项卡处于非活动状态,则不会是30,而只是1或2.

我想这是通过设计完成的,以提高性能,但有没有办法禁用这种行为？在我的场景中,它实际上是一个缺点.

我正在开发一个 TODO 列表 PWA，即使应用程序关闭，它也应该在每天上午 8:00 显示当天的任务（类似于闹钟）。

有没有办法通过 PWA 来实现这一目标？（主要针对Chrome/Android）

到目前为止，在我的服务人员中我已经（简化）

self.addEventListener("message", (event) => {
    // Workflow: The app sends a message that the timer should be set.
    const prom = new Promise((resolveIt) =>
      self.setTimeout(() => showAlarmAndResolve(resolveIt, event.data), '<timeout_in_ms>')
    );
    // tell the service worker to remain alive until promise is resolved
    event.waitUntil(prom); 
  }
});

async function showAlarmAndResolve(resolveIt, text) {
  const options = {
    body: text,
    tag: "todo-alert",
  };
  await self.registration.showNotification(
    "Your tasks for today",
    options
  );
  resolveIt();   // allow the …