Angular+Electron应用内闲置屏保实现及UserIdleService问题排查

推荐实现方式 #

• 自定义定时器方案：完全可控，适配仅检测应用内闲置的场景。监听Angular应用内的click、mousemove、keydown等用户交互事件，每次触发事件就重置定时器，超时后显示屏保，用户交互后隐藏。
• 第三方库方案：Angular和Electron本身没有内置应用级闲置检测能力，可选用UserIdleService这类第三方库，但需注意正确配置逻辑。

UserIdleService 事件每秒触发的问题分析 #

你的配置和代码存在两处关键问题：

1. 参数配置错误：idle: 100000 实际是100秒而非需求的10秒，ping: 60 会每60秒触发ping事件干扰状态判断；
2. 逻辑冲突：在else分支手动调用this._userIdle.resetTimer()，会导致状态切换时强制重置定时器，引发状态反复变更，表现为事件每秒触发。

修复方案 #

1. 修正配置参数，设置为10秒闲置时长：

UserIdleModule.forRoot({
    idle: 10000, // 10秒闲置触发
    timeout: 0, // 无需锁定功能设为0
    ping: 0 // 无需ping事件设为0
})

2. 移除else分支的resetTimer()调用，用户交互时UserIdleService会自动重置定时器，手动调用会导致逻辑冲突：

this._userIdle.onIdleStatusChanged().subscribe((isIdle) => {
    if (isIdle) {
        // 显示屏保界面的代码
    } else {
        // 隐藏屏保界面的代码
    }
});

3. 初始化时启动监测：

ngOnInit() {
    this._userIdle.startWatching();
}

自定义定时器替代方案示例 #

若不想依赖第三方库，手动实现更直接：

private idleTimer: any;
private readonly IDLE_DURATION = 10000; // 10秒

ngOnInit() {
    this.startIdleTimer();
    // 监听应用内用户交互事件
    document.addEventListener('mousemove', this.resetIdleTimer.bind(this));
    document.addEventListener('click', this.resetIdleTimer.bind(this));
    document.addEventListener('keydown', this.resetIdleTimer.bind(this));
}

private startIdleTimer() {
    this.idleTimer = setTimeout(() => {
        this.showScreenSaver = true; // 显示屏保
    }, this.IDLE_DURATION);
}

private resetIdleTimer() {
    this.showScreenSaver = false; // 隐藏屏保
    clearTimeout(this.idleTimer);
    this.startIdleTimer();
}

ngOnDestroy() {
    clearTimeout(this.idleTimer);
    // 移除事件监听避免内存泄漏
    document.removeEventListener('mousemove', this.resetIdleTimer.bind(this));
    document.removeEventListener('click', this.resetIdleTimer.bind(this));
    document.removeEventListener('keydown', this.resetIdleTimer.bind(this));
}

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