如何避免setInterval重复执行覆盖变量值：数字时钟秒数偏好重置问题

你的代码存在三个核心问题导致用户偏好被秒级重置：

• 状态变量i定义在displayTime函数内部，每秒调用函数时都会被重置为true，导致按钮点击后的状态无法保留。
• 按钮的点击事件在displayTime内重复绑定，每秒都会新增一个事件监听，不仅浪费资源还会导致状态混乱。
• 每次displayTime执行时，都会强制将disTime设置为带秒数的版本，覆盖了按钮点击后的修改。

修复后的代码 #

HTML（无需修改） #

<div id="date-elements"></div>
<div id="time-elements"></div>
<button id="btn">Hide seconds</button>

JavaScript #

// 全局保存用户偏好：是否显示秒数，初始为true（显示）
let showSeconds = true;
const btn = document.getElementById("btn");

// 只绑定一次按钮点击事件
btn.addEventListener("click", () => {
  showSeconds = !showSeconds;
  btn.innerHTML = showSeconds ? "Hide seconds" : "Display Seconds";
  // 点击后立即更新显示，不用等下一秒
  updateClock();
});

// 每秒更新时钟
setInterval(updateClock, 1000);
// 初始化显示
updateClock();

function updateClock() {
  const currentDate = new Date();
  const disDate = document.getElementById("date-elements");
  const disTime = document.getElementById("time-elements");

  // 解析时间日期部分
  const parts = {
    weekday: currentDate.getDay(),
    daysNumber: currentDate.getDate(),
    month: currentDate.getMonth() + 1,
    year: currentDate.getFullYear(),
    hours: currentDate.getHours(),
    minutes: currentDate.getMinutes(),
    seconds: currentDate.getSeconds(),
  };

  // 处理12小时制和AM/PM
  const formatAMPM = parts.hours >= 12 ? "PM" : "AM";
  const hours12 = parts.hours % 12 || 12;

  // 补零处理
  const dysNmbr = parts.daysNumber < 10 ? "0" + parts.daysNumber : parts.daysNumber;
  const mnth = parts.month < 10 ? "0" + parts.month : parts.month;
  const hrs = hours12 < 10 ? "0" + hours12 : hours12;
  const mins = parts.minutes < 10 ? "0" + parts.minutes : parts.minutes;
  const secs = parts.seconds < 10 ? "0" + parts.seconds : parts.seconds;

  // 星期名称映射
  const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  const currentDayName = days[parts.weekday];

  // 渲染日期
  disDate.innerHTML = `${currentDayName}, ${dysNmbr}/${mnth}/${parts.year}`;

  // 根据用户偏好渲染时间
  if (showSeconds) {
    disTime.innerHTML = `${hrs} : ${mins} : ${secs} ${formatAMPM}`;
  } else {
    disTime.innerHTML = `${hrs} : ${mins} ${formatAMPM}`;
  }
}

关键修改说明 #

1. 全局状态变量：将showSeconds放在函数外部，作为全局变量保存用户偏好，避免每次更新时钟时被重置。
2. 事件绑定优化：按钮点击事件只绑定一次，不再随时钟更新重复绑定，同时点击后直接调用updateClock立即更新显示。
3. 条件渲染时间：在updateClock函数内部，根据showSeconds的状态决定渲染带秒数还是不带秒数的时间，确保每秒更新时都遵循用户偏好。
4. 代码结构优化：将原displayTime重命名为updateClock，逻辑更清晰，同时初始化时直接调用一次，避免页面加载时的延迟。

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