TypeScript中clearInterval不起作用解决方法

问题描述

在使用 TypeScript 中 setInterval() 函数时，我们可能会遇到 clearInterval() 函数不起作用的情况，即使已经调用了 clearInterval() 函数，定时器仍然继续执行。

解决方法

方法一

第一种解决方法是使用箭头函数来绑定定时器函数的上下文，这样在清除定时器时可以正确地引用该定时器。例如：

const intervalId = setInterval(() => {
  console.log('hello');
}, 1000);

clearInterval(intervalId);

方法二

第二种解决方法是使用 bind() 函数来绑定定时器函数的上下文。例如：

class MyClass {
  intervalId: any;

  constructor() {
    this.intervalId = setInterval(this.sayHello.bind(this), 1000);
  }

  sayHello() {
    console.log('hello');
  }

  stopInterval() {
    clearInterval(this.intervalId);
  }
}

const myClass = new MyClass();
myClass.stopInterval();

在这种情况下，我们将定时器函数 sayHello() 绑定到了 MyClass 类的上下文中。然后，我们可以通过调用 stopInterval() 函数来停止定时器。

总结

使用 TypeScript 中的定时器函数时，确保正确引用定时器并使用箭头函数或绑定函数的方式来停止定时器函数。

希望本文对您有所帮助！