JavaScript中判断innerText为'Resume'时无法停止startDrive()问题

点击Start按钮，会触发startDrive()和buttonAndTimer()，按钮文本变成Pause；点击Pause按钮，文本切换为Resume，此时计时功能（buttonAndTimer()）能正常停止，但价格计算的startDrive()却没法在Resume状态下停止——原本想通过if (actioner.innerText == 'Resume')清除定时器，但实际这个判断完全无效，根本起不到停止价格计算的作用。

核心错误点 #

• 重复调用startDrive()：每次点击按钮都会执行startDrive()，反复创建新的价格定时器，旧定时器未被清除，一直在后台运行。
• 判断时机完全错误：startDrive()里的if (actioner.innerText == 'Resume')是在创建定时器后立即执行一次，既不会在按钮切换到Resume状态时触发，也不会在定时器运行中检查状态，等于这个判断写了白写。
• timerId未全局存储：timerId是startDrive()的内部变量，外部无法访问，就算想在Pause时手动清除价格定时器也做不到。

修复方案 #

修复后的JavaScript代码 #

window.onload = function() {
  // 全局变量
  const span = document.querySelector('span');
  const actioner = document.getElementById('actioner');
  const reseter = document.getElementById('reseter');
  let interval = null;
  let timerId = null; // 全局保存价格计算的定时器ID，方便外部清除
  let y = 3.90;
  let reversal = 20;
  const output = document.querySelector('output');
  
  // 按钮点击事件：根据当前文本判断是启动还是暂停
  actioner.addEventListener('click',() => {
    if (actioner.innerText === 'Start' || actioner.innerText === 'Resume') {
      // 启动计时和价格计算
      buttonAndTimer();
      startDrive();
    } else if (actioner.innerText === 'Pause') {
      // 暂停计时和价格计算
      buttonAndTimer();
      clearInterval(timerId);
      timerId = null;
    }
  });
  
  function buttonAndTimer() {
    if(!interval) {
      interval = setInterval(() => {
        span.innerText = parseInt(span.innerText) + 1 +' sec';
      },1000);
      actioner.innerText = 'Pause';
    } else {
      clearInterval(interval);
      interval = null;
      actioner.innerText = 'Resume';
    }
  }
  
  // 计算价格：避免重复创建定时器
  function startDrive() {
    if (timerId) return; // 如果已有定时器在运行，直接返回
    output.innerHTML = y.toFixed(2)+'€';
    timerId = setInterval(() => {
      if(y < reversal) {
        y += 0.14375;
      } else if(y > reversal) {
        y += 0.103125;
      }
      output.innerHTML = y.toFixed(2) + "€";
    },5000);
  }

  // 重置按钮：同时清除所有定时器，恢复初始状态
  reseter.addEventListener('click', () => {
    clearInterval(interval);
    clearInterval(timerId);
    interval = null;
    timerId = null;
    span.innerText = 0;
    actioner.innerText = 'Start';
    y = 3.90; // 重置价格初始值
    output.innerHTML = y.toFixed(2)+'€'; // 重置价格显示
  })
}

对应HTML代码 #

<div id = "box">
<button class = 'button' id = 'actioner'>Start</button>
<output></output>
<button class = 'button' id = 'reseter'>Reset</button>
<span>0</span>
</div>

对应CSS代码 #

#box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 30px;
  padding:30vh;
}

span {
  color:#74bde0;
  width:15vh;
  border:1px solid;
  border-radius:5px;
  text-align: center;
  max-width:20vh; 
}

.button {
  border:none;
  border-radius: 30px;
  cursor: pointer;
  color:#74bde0;
}

output {
  border: 1px solid;
border-color:#74bde0 ;
border-radius: 5px;
height: 10vh;
width: 30vh;
text-align: center;
color:#74bde0;
}

内容的提问来源于stack exchange，提问作者Özgür Sahin