Javascript clearTimeout偶尔会失败

我试图在Angular 2环境中管理一个计时器，clearTimeout似乎只在大约一半的时间内正常工作。我正在用打字机打字

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

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秒结束后触发，即使它们本应被新计时器替换

我已经通过了其他的问题，所以关于这一点，没有适用于我的情况，就我所能看到的

我得到的一个线索是，如果我在refreshTimer中删除对

this.setTimer（）

的调用，那么clearTimeout调用似乎可以正常工作，这一点我无法解释。换句话说，创建一个新的计时器不知何故会导致旧计时器存活下来。我错过了什么

---

谢谢大家!

我会将对

clearTimer

的调用移动到

setTimer

函数中，看看这是否有帮助。

在

clearTimeout

函数中，您不仅要清除计时器，还要重置

timer

变量：

public clearTimer() {
    clearTimeout(this.timer);
    this.timer = null; // <-- You also want your variable to become null here.
}

应该是：

 private timer = null;

---

在

refreshTimer

中，在调用

this.setTimer（）

之前，您需要先调用

this.clearTimer（）

---

但是，在

startTimer

中，您不能调用

this.clearTimer（）

。因此，如果调用代码多次调用

startTimer

，而没有在其间调用

this.clearTimer

，则将启动多个超时，但是只有最后一个类会被类记住，并且在

再次调用此时取消。clearTimer

。

能否包含一些代码来显示TimeoutService类的实际使用情况？作为最佳实践，我建议您始终初始化变量。对于计时器（因为您稍后会检查它的存在），我会将其初始化为

null

（即

private timer=null；

）一次完成！非常感谢。感谢您的想法，我已经将它们作为最佳实践集成到代码中。

 private timer = null;