setInterval未按预期执行：秒表功能实现问题求助

你的代码存在几个核心问题，导致无法实现实时显示开始到当前的时间间隔：

• watch 函数每次执行都会创建新的 <p> 标签，页面会不断新增冗余元素
• watch 里调用 stop() 会直接终止计时并累加总时长，这不是实时更新的逻辑，而是直接停止了计时

下面是修正后的代码，能实现实时显示开始按钮按下后到当前的时间间隔：

class Stopwatch {
  constructor() {
    this.status = 'stopped';
    this.currentTime = 0;
    this.interVal = null;
    this.duration = 0;
    // 初始化时仅创建一次p标签，避免重复创建
    this.displayElement = document.createElement("p");
    this.displayElement.id = "stopwatch-display";
    document.body.appendChild(this.displayElement);
  }

  watch() {
    // 计算当前实时间隔：当前时间 - 开始时间 + 之前累计的时长
    const currentElapsed = Date.now() - this.currentTime + this.duration;
    // 格式化显示（这里用毫秒展示，可按需改成时分秒格式）
    this.displayElement.innerHTML = `当前间隔：${currentElapsed} 毫秒`;
  }

  start() {
    if(this.status === 'started') throw new Error('already started');
    // 记录当前时间，若为暂停后继续则基于累计时长计算
    this.currentTime = Date.now();
    this.interVal = setInterval(() => this.watch(), 100);
    this.status = 'started';
    return this.interVal;
  }

  stop() {
    if(this.status === 'stopped') throw new Error('already stopped');
    // 停止时累加本次计时时长
    this.duration += Date.now() - this.currentTime;
    clearInterval(this.interVal);
    this.interVal = null;
    this.status = 'stopped';
    return this.duration;
  }
}

// 使用示例
const stopwatch = new Stopwatch();
// 点击开始按钮调用：stopwatch.start();
// 点击停止按钮调用：stopwatch.stop();

关键改动说明： #

• 构造函数中提前创建并挂载 <p> 标签，避免每次更新都新增元素
• watch 函数改为实时计算当前时间与开始时间的差值，结合累计时长更新显示内容，不再触发停止逻辑
• stop 函数中添加 clearInterval 终止定时器，防止计时后台继续运行
• 增加了基础的时间格式化逻辑，你可以根据需求调整为更友好的 mm:ss:SSS 格式

内容的提问来源于stack exchange，提问作者arta