JS循环计时器Timer

/**
 * 循环计时器
 * Author：Ciaran
 * Update Date: 2025年2月17日
 */
export class Timer extends HTMLDivElement {
  constructor(interval: number) {
    super();
    this.interval = interval || 1000;
  }

  interval: number;
  intervalPtr: number;

  handleElapsed() {
    const event = new CustomEvent("elapsed", { detail: null });
    this.dispatchEvent(event);
  }

  start() {
    if (this.intervalPtr) return this.intervalPtr;
    this.intervalPtr = setInterval(() => {
      this.handleElapsed();
    }, this.interval);
    return this.intervalPtr;
  }

  stop() {
    if (this.intervalPtr) {
      clearInterval(this.intervalPtr);
      this.intervalPtr = null;
    }
  }

  restart() {
    this.stop();
    this.start();
  }
}
customElements.define("i-timer", Timer, { extends: "div" });

用法

cosnt GET_DATA_INTERVAL = 5 * 60 * 1000;
let timer1 = new Timer(GET_DATA_INTERVAL);

// 监听
timer1.addEventListener("elapsed", this.onGetDataTimerElapsed);

// 第一次启动
// timer1.start();

// 第一次启动或重启计时
// timer1.restart();

释放

timer1.removeEventListener("elapsed", this.onGetDataTimerElapsed);
timer1.stop();