JavaScript面向对象（POO）定时器失效问题求助

我帮你分析了一下你的面向对象版本定时器代码的问题，主要是this指向错误和初始化/重置逻辑的疏漏，下面给你拆解问题并提供修复后的代码：

问题分析 #

1. this指向丢失：在setInterval(this.updateCountDown, 1000)中，定时器的回调函数updateCountDown里的this默认会指向全局对象（浏览器里是window），而不是你的countDown实例，导致this.timeSec、this.interval这些属性无法正确访问。
2. 未重置倒计时时间：当倒计时结束后，this.timeSec会变成负数，此时点击按钮重新启动定时器，不会回到初始的60秒，导致倒计时无法正常显示。
3. 重复定时器问题：如果多次点击按钮，会创建多个定时器实例，导致倒计时速度变快，需要在启动新定时器前清除旧的。

修复后的代码 #

class CountDown {
  // 把参数放到构造函数里，让定时器更灵活，支持自定义倒计时分钟数、元素选择器
  constructor(startMinutes = 1, btnSelector = '#btn-signer', countdownSelector = '#countdown') {
    this.btnTimer = document.querySelector(btnSelector);
    this.countdownElt = document.querySelector(countdownSelector);
    this.startMinutes = startMinutes;
    // 初始化时间，后续重置会用到
    this.resetTime();
    // 绑定点击事件，用箭头函数保证this指向实例
    this.btnTimer.addEventListener('click', () => this.startTimer());
  }

  // 重置倒计时时间的方法
  resetTime() {
    this.timeSec = this.startMinutes * 60;
  }

  startTimer() {
    // 先清除之前的定时器，避免多个定时器同时运行
    if (this.interval) {
      clearInterval(this.interval);
    }
    // 重置时间
    this.resetTime();
    // 用箭头函数作为回调，保证this指向当前实例
    this.interval = setInterval(() => this.updateCountDown(), 1000);
    // 立即执行一次更新，避免页面加载后等1秒才显示初始时间
    this.updateCountDown();
  }

  updateCountDown() {
    const minutes = Math.floor(this.timeSec / 60);
    let seconds = this.timeSec % 60;
    seconds = seconds < 10 ? `0${seconds}` : seconds;
    
    this.countdownElt.innerHTML = `Temps restant : ${minutes}min ${seconds}sec`;
    
    // 先检查是否到0，再减时间，避免显示负数
    if (minutes <= 0 && seconds <= 0) {
      clearInterval(this.interval);
      this.countdownElt.innerHTML = "Temps écoulé, veuillez réserver à nouveau.";
      return;
    }
    
    this.timeSec--;
  }
}

// 实例化定时器
const myCountDown = new CountDown();

关键优化点说明 #

• 构造函数参数化：把倒计时时长、按钮和倒计时元素的选择器作为参数，让这个定时器类可以复用在不同场景。
• this指向保证：使用箭头函数作为setInterval的回调，或者也可以在构造函数里用this.updateCountDown = this.updateCountDown.bind(this)来绑定this。
• 时间重置逻辑：新增resetTime方法，每次启动定时器时重置时间，确保每次点击都从初始时长开始倒计时。
• 清除旧定时器：在启动新定时器前清除之前的实例，避免多个定时器同时运行导致倒计时异常。
• 提前终止判断：在更新倒计时前先判断是否已经到0，避免显示负数时间。

这样修改后，你的面向对象定时器就能正常工作啦！

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