clearTimeout偶尔会失败

Question

我正在尝试在Angular 2环境中管理计时器,而clearTimeout似乎只能在大约一半的时间内正常工作.我在用TypeScript写作.

我将计时器保留在自己的服务中:

export class TimeoutService {
    constructor(
        private router: Router,
        private httpService: HttpService
    ) {}

    //Properties
    private timer;

    //Methods
    public clearTimer() {
        clearTimeout(this.timer);
    }

    private logOut() {
        return this.httpService.Post('api/session/logout', '');
    }

    private redirectToTimeoutPage() {
        this.router.navigate(['/timeout']);
    }

    public refreshTimer() {
        console.log('refreshing timer');

        if (this.timer) {
            this.clearTimer();
            this.setTimer();
        }
    }

    public startTimer() {
        this.setTimer();
    }

    private setTimer() {
        this.timer = setTimeout(() => {
            this.logOut()
                .then(() => {
                    this.clearTimer();
                    this.redirectToTimeoutPage();
                });
        }, 30000);
    }
}

我从refreshTimer方法的console.log中知道,当我期望它时,它会被调用,而不是其他.但是,大多数情况下,较早的计时器不会被clearTimeout调用取消,并且即使它们应该被新的计时器取代,它们也会在30秒后启动.

我已经完成了其他有关这方面的问题,就我所见,没有一个适用于我的情况.

我得到的一个线索,我无法破译,如果我将调用移到this.setTimer()refreshTimer中,那么clearTimeout调用似乎工作正常.换句话说,创建一个新计时器会以某种方式导致旧计时器生存.我在这里错过了什么？

谢谢!

Answer 1

在refreshTimer打电话this.clearTimer()之前你要打电话this.setTimer().

但是,startTimer你不打电话this.clearTimer().因此,如果调用代码startTimer多次调用而没有执行任何调用this.clearTimer,则会启动多个超时,但只有最后一个会被类记住,并在this.clearTimer再次调用时被取消.