基于Cordova与Ionic的TypeScript闲置检测实现及Router问题解决

我来帮你拆解一下遇到的问题，以及背后的原因：

一、为什么会出现this.router is undefined？ #

你的第一个代码版本里，有两个关键问题导致了这个错误：

1. 函数执行上下文丢失：当你把this.goInactive传给setTimeout，或者把this.resetTimer()传给addEventListener时，函数的this指向已经不再是你的类实例了——在浏览器环境下，它会变成全局的window对象，自然找不到router属性。
2. 事件监听传参错误：你写了addEventListener("mousemove", this.resetTimer(), true)，这里的括号会让resetTimer立刻执行，而不是把函数本身作为回调绑定给事件。相当于你把resetTimer的返回值（这里是undefined）传给了监听，事件触发时根本不会执行预期的重置逻辑。

二、为什么处理函数不能加括号？ #

当你给addEventListener、setTimeout这类API传回调时，需要传递的是函数引用（也就是不带括号的函数名）。如果加了括号，就变成了立刻执行这个函数，把它的返回值当作回调——这显然不是你想要的：

• 正确写法：setTimeout(this.goInactive, 5000) → 把goInactive函数的引用传进去，5秒后自动调用它。
• 错误写法：setTimeout(this.goInactive(), 5000) → 立刻执行goInactive，然后把它的返回值（这里是undefined）传给setTimeout，等于什么都没绑定。

三、优化你的实现方案 #

你后来用外部变量outsideRouter的版本能运行，但其实可以用更符合TypeScript类封装规范的方式解决，避免全局变量：

export class ScannerLogicService {
  private timeoutID: any;

  constructor(
    private network: Network, 
    private router: Router,
    public barcode: BarcodeScanner, 
    public alertController: AlertController, 
    private http: HttpClient, 
    private dialog: Dialogs
  ) {
    this.setupInactivityChecker();
  }

  private startTimer(): void {
    // 用箭头函数绑定this，确保goInactive执行时this指向类实例
    this.timeoutID = window.setTimeout(() => this.goInactive(), 1800000);
  }

  private resetTimer(): void {
    window.clearTimeout(this.timeoutID);
    this.goActive();
  }

  private goInactive(): void {
    console.log('Ahhhh.. finally inactive again. Now I may rest -_-');
    this.router.navigate(['login']);
  }

  private goActive(): void {
    console.log('Active again');
    this.startTimer();
  }

  private setupInactivityChecker(): void {
    // 把事件列表抽出来，循环绑定更简洁
    const userEvents = ['mousemove', 'mousedown', 'keypress', 'DOMMouseScroll', 'mousewheel', 'touchmove', 'MSPointerMove'];
    
    userEvents.forEach(event => {
      // 用箭头函数绑定this，保证resetTimer执行时能访问到类的router
      addEventListener(event, () => this.resetTimer(), true);
    });

    this.startTimer();
  }
}

这个版本的核心改进是用箭头函数绑定了函数的执行上下文，确保所有类方法里的this始终指向当前的ScannerLogicService实例，自然就能正常访问this.router了。同时把所有方法设为私有，更符合类的封装原则。

核心总结 #

• 绑定事件/定时器回调时，传不带括号的函数引用，加括号会立刻执行函数而非绑定回调。
• 类方法作为回调时，用箭头函数或bind(this)来固定this的指向，避免上下文丢失。
• 闲置自动登出的逻辑本质就是：监听用户所有交互事件，每次交互重置超时定时器，超时后触发登出路由跳转。

内容的提问来源于stack exchange，提问作者Jeandre Pretørius