Chrome标签页冻结和SetTimeout / Web Workers

Question

Chrome 79刚刚被释放，默认情况下new tab freezing feature处于打开状态。有谁知道在JavaScript中使用setTimeouts（甚至是Web worker）时如何解决此问题？

我们正在运行一些代码来检查客户端活动，以便在设定的时间后更方便地超时/注销。不幸的是，当选项卡处于“冻结”状态时，这些都不起作用。

有什么想法吗？

Answer 1

基于我创建的此类age lifecycle api：

const pageLifecycle = new class PageLifecycle extends EventTarget {
  constructor() {
    super();
    this.state = this.getState();
    const fn = () => this.stateChange(this.getState()),
      opt = { capture: true },
      events = {
        pageshow: fn,
        focus: fn,
        blur: fn,
        visibilitychange: fn,
        resume: fn,
        freeze: () => this.stateChange("frozen"),
        pagehide: event => this.stateChange(event.persisted ? "frozen" : "terminated")
      };
    for (const [event, fn] of Object.entries(events)) window.addEventListener(event, fn, opt);
  }
  getState() {
    return document.visibilityState === "hidden" ? "hidden" : document.hasFocus() ? "active" : "passive";
  }
  stateChange(nextState) {
    if (nextState === this.state) return;
    const prevState = this.state;
    this.state = nextState;
    this.dispatchEvent(Object.assign(new Event("stateChange"), { prevState, state: this.state }));
  }
};

//--------
pageLifecycle.addEventListener("stateChange", event => console.log(`State change: ${event.prevState} >>> ${event.state}`));

您可以向其添加事件侦听器（事件：stateChange），并在["active", "passive", "hidden", "frozen", "terminated"]中获得event.state之一。检查passive并保存数据。如果您应强制检查后端以查看用户是否仍在登录，则可以检查event.prevState以确定先前的状态。