如何用下拉菜单修改ESP32网页中JavaScript的setInterval执行间隔？

一、先给HTML添加下拉菜单 #

在网页<body>区域（比如两个图表上方）插入这段代码，提供可选的时间间隔选项：

<div style="margin: 10px 0;">
  <label>数据更新间隔：</label>
  <select id="intervalSelect">
    <option value="10000">10秒</option>
    <option value="30000" selected>30秒</option>
    <option value="60000">60秒</option>
  </select>
</div>

二、改造JavaScript核心逻辑 #

原代码的setInterval是一次性启动的，无法动态修改间隔，我们需要通过保存定时器ID、封装函数的方式实现动态调整。

1. 定义全局变量 #

在所有JS函数最顶部添加这些变量，用于存储定时器ID、默认间隔和图表实例：

// 存储定时器ID，方便后续停止任务
let humidityInterval;
let pressureInterval;
// 默认间隔和原代码一致，单位为毫秒
const DEFAULT_INTERVAL = 30000;
// 把图表实例设为全局，让更新函数能访问
let humidityChart;
let pressureChart;

2. 封装数据请求与图表更新函数 #

把原代码里setInterval内的重复逻辑抽成独立函数，便于复用：

// 更新湿度数据和对应图表
function updateHumidity() {
  fetch("/humidity")
    .then(response => response.text())
    .then(data => {
      addData(humidityChart, parseFloat(data));
    });
}

// 更新压力数据和对应图表
function updatePressure() {
  fetch("/pressure")
    .then(response => response.text())
    .then(data => {
      addData(pressureChart, parseFloat(data));
    });
}

3. 写一个通用的定时器设置函数 #

这个函数负责清除旧定时器，再根据新间隔启动定时任务：

function setUpdateIntervals(intervalMs) {
  // 先停止之前的定时器，避免多个任务同时运行
  if (humidityInterval) clearInterval(humidityInterval);
  if (pressureInterval) clearInterval(pressureInterval);
  
  // 启动新的定时任务
  humidityInterval = setInterval(updateHumidity, intervalMs);
  pressureInterval = setInterval(updatePressure, intervalMs);
}

4. 初始化与监听下拉菜单 #

修改原代码的window.onload函数，替换掉原来的setInterval调用，添加下拉菜单的事件监听：

window.onload = function() {
  // 保留原代码的湿度图表初始化逻辑，赋值给全局变量
  humidityChart = new Chart(document.getElementById("humidityChart"), {
    // 原代码中的图表配置项直接保留
  });

  // 保留原代码的压力图表初始化逻辑，赋值给全局变量
  pressureChart = new Chart(document.getElementById("pressureChart"), {
    // 原代码中的图表配置项直接保留
  });

  // 用默认间隔初始化定时器
  setUpdateIntervals(DEFAULT_INTERVAL);

  // 监听下拉菜单的选择变化
  const intervalSelect = document.getElementById("intervalSelect");
  intervalSelect.addEventListener("change", function() {
    // 将选中的字符串值转为毫秒数
    const selectedInterval = parseInt(this.value);
    // 重新设置定时器
    setUpdateIntervals(selectedInterval);
  });
};

三、关键逻辑说明 #

• 定时器ID的作用：setInterval运行后会返回唯一ID，通过clearInterval+ID可以停止定时任务。如果不清除旧任务，切换间隔后旧任务仍会运行，导致数据请求频率混乱。
• 全局变量的必要性：图表实例和定时器ID必须设为全局，否则封装的更新函数无法访问，会出现“变量未定义”的报错。
• 下拉菜单监听逻辑：用户选择新间隔时触发change事件，获取选中的毫秒值后调用setUpdateIntervals，替换旧定时器实现动态调整。

注意事项 #

• 删除原代码中直接调用的两个setInterval语句，避免与新逻辑冲突。
• 确保原代码中的addData函数是全局可访问的（原项目中该函数已为全局，无需修改）。

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