锅炉温度控制开发求助：实现加热关闭后的降温逻辑

核心功能补全与问题修复 #

现有代码未实现关闭加热后的降温逻辑，这是需求明确要求的核心功能。同时还有几处细节问题需要修正：

• HTML中「Steam Whistle」按钮未设置id="steam-whistle-button"，但JS中多次尝试获取该元素，会导致报错
• 加热音频在每次温度上升时重复触发播放，会导致音频重叠或报错
• 温度值未做格式化，多次累加后会出现多位小数（如18.000000000000004）

具体优化点 #

1. 统一温度变化定时器管理 #

用同一个定时器处理加热升温与停止加热后的降温逻辑，避免多个定时器冲突，同时简化状态切换逻辑。

2. 缓存DOM元素 #

提前获取并缓存所有需要操作的DOM元素，避免每次函数调用都重复查询DOM，提升性能。

3. 音频播放优化 #

加热音频只在状态切换为开启时播放（添加loop属性循环播放），而非每次温度变化都重启播放；同时添加播放错误的容错处理。

4. 温度值格式化 #

用toFixed(1)格式化温度值，避免出现精度问题导致的多位小数。

5. 常量抽离 #

将温度阈值（最低18℃、最高110℃、沸腾100℃）、温度变化步长、时间间隔等抽离为常量，便于后续调整维护。

6. 修复按钮ID匹配问题 #

给HTML中的「Steam Whistle」按钮添加对应的id，确保JS能正确获取元素。

重构后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Boiler Temperature Control</title>
  <style>
    body {
      background-color: black;
      font-family: Arial, sans-serif;
      color: white;
      text-align: center;
    }

    .container {
      margin: 0 auto;
      max-width: 600px;
      padding: 20px;
    }

    h1 {
      font-size: 36px;
      margin-bottom: 0;
    }

    .image-container {
      margin-top: 20px;
      margin-bottom: 40px;
    }

    img {
      width: 100%;
      max-width: 500px;
      height: auto;
    }

    .btn {
      display: inline-block;
      background-color: #8B4513;
      color: white;
      border: none;
      padding: 10px 20px;
      margin: 10px;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .btn:hover {
      background-color: #CD853F;
    }

    .temperature-container, .heater-status-container {
      display: inline-block;
      margin-right: 20px;
    }

    .temperature-container h2, .heater-status-container h2 {
      margin-top: 0;
    }

    .temperature-container p, .heater-status-container p {
      margin: 0;
      font-size: 24px;
    }

    .heater-status-container p {
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
    <div class="container">
      <h1>Boiler Temperature Control</h1>
      <div class="image-container">
        <img src="https://www.canberratimes.com.au/images/transform/v1/crop/frm/32suSVsqH3pdw6NJyh92X9D/f330b4ee-4f0b-4cba-bd95-5dce19be6c00.jpg/r0_0_3000_2003_w3000_h2003_fmax.jpg" alt="Steam Train">
      </div>
      <div class="temperature-container">
        <h2>Current Temperature</h2>
        <p><span id="temperature"></span> °C</p>
      </div>
      <div class="heater-status-container">
        <h2>Heater Status</h2>
        <p><span id="heater-status"></span></p>
      </div>
      <button class="btn" onclick="toggleHeater()">Toggle Heater</button>
      <button id="steam-whistle-button" class="btn" onclick="playSteamWhistle()">Steam Whistle</button>
      <audio id="heater-audio" src="bonfire-hq-6991.mp3" loop></audio>
    </div>
    <script src="script.js"></script>
  </body>
</html>

JavaScript部分 #

// 常量抽离，便于维护
const CONSTANTS = {
  MIN_TEMP: 18,
  MAX_TEMP: 110,
  BOIL_TEMP: 100,
  HEAT_STEP: 0.5,
  COOL_STEP: 0.5,
  HEAT_INTERVAL: 250,
  COOL_INTERVAL: 1000
};

// 缓存DOM元素
const elements = {
  temperature: document.getElementById('temperature'),
  heaterStatus: document.getElementById('heater-status'),
  steamWhistleBtn: document.getElementById('steam-whistle-button'),
  heaterAudio: document.getElementById('heater-audio')
};

// 音频实例
const steamWhistleSound = new Audio('sfx6-whistlescreemtrain-33567.mp3');

// 状态变量
let boilerTemperature = CONSTANTS.MIN_TEMP;
let boilerHeater = false;
let temperatureIntervalId = null;

// 更新温度显示
function updateTemperature() {
  // 格式化温度，保留1位小数，避免精度问题
  elements.temperature.innerText = boilerTemperature.toFixed(1);
  // 更新蒸汽 whistle 按钮状态
  elements.steamWhistleBtn.disabled = boilerTemperature <= CONSTANTS.BOIL_TEMP;
}

// 更新加热器状态显示
function updateHeaterStatus() {
  elements.heaterStatus.innerText = boilerHeater ? 'ON' : 'OFF';
  // 控制加热音频播放/暂停
  if (boilerHeater) {
    elements.heaterAudio.play().catch(err => console.log('音频播放失败:', err));
  } else {
    elements.heaterAudio.pause();
    elements.heaterAudio.currentTime = 0;
  }
}

// 温度变化核心逻辑
function handleTemperatureChange() {
  if (boilerHeater) {
    // 加热逻辑：每0.25秒升0.5℃，不超过最大值
    if (boilerTemperature < CONSTANTS.MAX_TEMP) {
      boilerTemperature += CONSTANTS.HEAT_STEP;
      updateTemperature();
    }
  } else {
    // 降温逻辑：每秒降0.5℃，不低于最小值
    if (boilerTemperature > CONSTANTS.MIN_TEMP) {
      boilerTemperature -= CONSTANTS.COOL_STEP;
      updateTemperature();
    }
  }
}

// 切换加热器状态
function toggleHeater() {
  boilerHeater = !boilerHeater;
  updateHeaterStatus();

  // 清除现有定时器
  if (temperatureIntervalId) {
    clearInterval(temperatureIntervalId);
    temperatureIntervalId = null;
  }

  // 根据状态启动对应定时器
  const intervalTime = boilerHeater ? CONSTANTS.HEAT_INTERVAL : CONSTANTS.COOL_INTERVAL;
  temperatureIntervalId = setInterval(handleTemperatureChange, intervalTime);
}

// 播放蒸汽鸣笛声
function playSteamWhistle() {
  if (boilerTemperature > CONSTANTS.BOIL_TEMP) {
    steamWhistleSound.currentTime = 0;
    steamWhistleSound.play().catch(err => console.log('鸣笛声播放失败:', err));
    boilerTemperature -= 5;
    updateTemperature();
  }
}

// 初始化页面
updateTemperature();
updateHeaterStatus();
elements.steamWhistleBtn.disabled = true;

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