在类定义中重置setTimeout

编程问答 2022-08-14

问题描述

在打字稿中，我试图基于单击功能重置计时器。我研究了clearTimeout周围的解决方案，但它们似乎不适合我在类中定义setTimeout（）的情况。

import { ModalAction } from "./modalScript.js";
export class Timer {
  private interval: number;
  constructor(interval: number) {
    this.interval = interval;
  }

  startTimer() {
    console.log("startedTimer");
    setTimeout(function () {
      let mod = new ModalAction();
      mod.renderModal();
    },this.interval);
  }
  resetTimer() {
    clearTimeout();
  }
}

在我的外部类中，我正在创建一个新的Timer类，它以一定的间隔传递。我希望能够从我的外部类调用myTimerObject.clearTimeout（）。 clearTimeout需要一个数字。我曾尝试将startTimeout（）设置为变量，但是在clearTimout（）中调用它时，它不会读取为数字。

实施该建议并使其生效，并进行了一些更改和一个新问题。 我必须在构造函数中声明变量，否则打字稿会抱怨未初始化。所以现在，当我从外部类创建新对象时，我必须传递一个数字参数。我随机输入数字1。似乎有点不干净，但是它起作用了。有任何改进吗？

import { ModalAction } from "./modalScript.js";
export class Timer {
  private interval: number;
  **private handler: number;**
  constructor(interval: number,**handler: number**) {
    this.interval = interval;
    **this.handler = handler;**
  }

  startTimer() {
    console.log("starting timer");
    this.handler = setTimeout(function () {
      let mod = new ModalAction();
      mod.renderModal();
    },this.interval);
  }
  resetTimer() {
    console.log("timer reset");
    clearTimeout(this.handler);
    this.startTimer();
  }
}

使用myObject = new Timer（10000，1）;

构建

解决方法

您可以通过将setTimeout结果分配给变量并在clearTimeout中使用它来修复代码。

import { ModalAction } from "./modalScript.js";
export class Timer {
  private interval: number;
  private handler?: ReturnType<typeof setTimeout>;
  constructor(interval: number) {
    this.interval = interval;
  }

  startTimer() {
    console.log("startedTimer");
    this.handler = setTimeout(function () {
      let mod = new ModalAction();
      mod.renderModal();
    },this.interval);
  }

  resetTimer() {
    clearTimeout(this.handler);
  }
}

或者，您可以使用number作为setTimeout的返回类型。

classclassclassjavascriptsettimeouttypescripttypescripttypescript