求助：如何实现点击按钮启动持续运行的JavaScript定时器

你当前的代码存在几个关键问题：

• 用setInterval每隔1秒就给按钮绑定一次点击事件，点击按钮时会触发N次更新操作（N是页面到点击时经过的秒数）
• date变量是在绑定事件时生成的固定时间，所以不管什么时候点击，显示的都是同一个时间点
• 逻辑完全搞反了：应该是点击按钮后启动定时器，而不是定时器循环绑定点击事件

点击按钮后，启动一个每秒执行一次的定时器，每次执行时获取当前时间并更新DOM。同时要加个判断，防止重复点击按钮启动多个定时器。

// 提前获取DOM元素，避免重复查询
const button = document.getElementById("btn");
const timeDisplay = document.getElementById("h1text");
let timerId = null; // 存储定时器ID，用于控制启停状态

button.addEventListener("click", () => {
  // 若定时器已在运行，直接返回避免重复启动
  if (timerId) return;
  
  // 启动每秒更新的定时器
  timerId = setInterval(() => {
    const currentDate = new Date();
    timeDisplay.innerHTML = `${currentDate.getHours()}:${currentDate.getMinutes()}:${currentDate.getSeconds()}`;
  }, 1000);
});

// 可选：如需停止定时器，可添加如下逻辑
// function stopTimer() {
//   clearInterval(timerId);
//   timerId = null;
// }

• 提前获取DOM元素，减少重复DOM查询的性能损耗
• 通过timerId标记定时器状态，避免重复点击启动多个定时器
• 在定时器回调内每次生成新的Date对象，确保获取的是实时时间
• 使用模板字符串拼接时间，比加号拼接更简洁易读

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