javascript - Chrome 标签卡住和 SetTimeout/Web Workers

Question

Chrome 79 刚刚发布，带有 new tab freezing feature默认开启。有没有人知道在 JavaScript 中使用 setTimeouts(甚至网络 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获取先前的状态以确定是否应该强制检查后端以查看用户是否仍在登录。