浏览器切换标签后angular-user-idle插件空闲检测异常求助

浏览器后台标签会对setInterval等定时器进行节流（例如Chrome将后台标签的定时器间隔限制为1000ms以上），导致angular-user-idle插件内部的计时逻辑无法精准触发onTimerStart事件，进而无法实时更新文档标题的倒计时提示。

方案1：利用Page Visibility API补全失焦期间的计时 #

通过浏览器原生的Page Visibility API监听页面焦点状态，记录失焦时长并手动修正空闲计时，确保标题更新逻辑不受后台节流影响：

import { Component, OnInit } from '@angular/core';
import { UserIdleService } from 'angular-user-idle';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  private idleStartTime: number | null = null;
  private timeoutRemaining: number = 0;
  private isPageVisible = true;

  constructor(private userIdle: UserIdleService) {}

  ngOnInit(): void {
    // 监听页面可见性变化
    document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));

    // 初始化插件监听，记录活跃状态下的倒计时
    this.userIdle.onTimerStart().subscribe(count => {
      if (this.isPageVisible) {
        this.updateTitle(count);
        this.timeoutRemaining = count;
      }
    });

    // 记录空闲状态触发时间
    this.userIdle.onIdle().subscribe(() => {
      this.idleStartTime = Date.now();
    });
  }

  private handleVisibilityChange(): void {
    this.isPageVisible = !document.hidden;
    if (!this.isPageVisible) {
      // 失焦时保存当前状态
      this.idleStartTime = Date.now();
    } else {
      // 聚焦时计算失焦时长，修正倒计时
      if (this.idleStartTime) {
        const elapsedSeconds = Math.floor((Date.now() - this.idleStartTime) / 1000);
        this.idleStartTime = null;
        
        if (elapsedSeconds >= this.timeoutRemaining) {
          // 失焦期间已超时，直接触发最终状态
          this.updateTitle(0);
          this.userIdle.stopTimer();
          // 执行登出逻辑
        } else {
          // 更新剩余倒计时并同步标题
          const newRemaining = this.timeoutRemaining - elapsedSeconds;
          this.updateTitle(newRemaining);
        }
      }
    }
  }

  private updateTitle(remaining: number): void {
    document.title = remaining > 0 ? `您将在${remaining}秒后登出` : '已超时，请重新登录';
  }
}

方案2：自定义倒计时逻辑，脱离插件定时器依赖 #

放弃依赖插件的onTimerStart事件，在空闲状态触发后，直接基于时间戳计算剩余超时时间，确保标题更新的准确性：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { UserIdleService } from 'angular-user-idle';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
  private titleUpdateInterval: number | null = null;
  private timeoutEndTime: number = 0;
  private readonly TIMEOUT_DURATION = 120; // 超时时长（秒）

  constructor(private userIdle: UserIdleService) {}

  ngOnInit(): void {
    // 空闲状态触发时启动自定义倒计时
    this.userIdle.onIdle().subscribe(() => {
      this.timeoutEndTime = Date.now() + this.TIMEOUT_DURATION * 1000;
      this.startTitleUpdate();
    });

    // 用户活动恢复时重置标题和倒计时
    this.userIdle.onActive().subscribe(() => {
      this.stopTitleUpdate();
      document.title = '你的应用名称';
    });
  }

  private startTitleUpdate(): void {
    this.stopTitleUpdate();
    this.titleUpdateInterval = window.setInterval(() => {
      const remainingSeconds = Math.max(0, Math.floor((this.timeoutEndTime - Date.now()) / 1000));
      this.updateTitle(remainingSeconds);
      
      if (remainingSeconds === 0) {
        this.stopTitleUpdate();
        this.userIdle.stopTimer();
        // 执行登出逻辑
      }
    }, 1000);
  }

  private stopTitleUpdate(): void {
    if (this.titleUpdateInterval) {
      clearInterval(this.titleUpdateInterval);
      this.titleUpdateInterval = null;
    }
  }

  private updateTitle(remaining: number): void {
    document.title = `您将在${remaining}秒后登出`;
  }

  ngOnDestroy(): void {
    this.stopTitleUpdate();
  }
}

方案3：修改插件内部计时逻辑（进阶） #

如果必须依赖插件的onTimerStart事件，可以fork插件仓库，将内部基于setInterval的计时替换为基于performance.now()的精准计时，避免后台节流影响：

将插件中类似以下的定时器代码：

this.timer = setInterval(() => {
  this.count--;
  this.timerStart.next(this.count);
}, 1000);

替换为：

let startTime = performance.now();
const originalCount = this.count;
const updateTimer = () => {
  const elapsedSeconds = Math.floor((performance.now() - startTime) / 1000);
  this.count = originalCount - elapsedSeconds;
  
  if (this.count > 0) {
    this.timerStart.next(this.count);
    setTimeout(updateTimer, 1000);
  } else {
    // 触发超时逻辑
    this.timerStart.complete();
  }
};
updateTimer();

这种方式通过精准时间戳计算实际流逝时间，即使后台定时器被节流，也能保证count值的准确性。

内容的提问来源于stack exchange，提问作者Aditya Jaiswal