拳击/倒计时计时器点击后prompt重复调用问题求助

问题核心是**setInterval每秒都会调用一次timerStart函数**，而你把prompt放在timerStart内部，导致每秒都会弹出输入框，形成无限循环。同时prompt是同步阻塞的，会卡住后续代码执行，直到用户关闭弹窗，但定时器不会等待，到点又会触发新的调用，进一步加剧问题。

修复方案 #

• 只在点击启动按钮时弹出一次输入框，获取初始倒计时时间
• 将初始的分钟、秒数保存为全局变量，让timerStart直接操作这些变量递减，无需重复获取
• timerStart仅负责倒计时逻辑和页面更新，不再包含弹窗逻辑

修改后的代码 #

// 全局变量存储当前倒计时的分钟和秒数
let currentMinutes = 0;
let currentSeconds = 0;
let intervalTime;

function timerStart() {
  if (currentSeconds > 0) {
    currentSeconds--;
  } else if (currentMinutes > 0) {
    currentMinutes--;
    currentSeconds = 59;
  } else {
    clearInterval(intervalTime);
    return;
  }
  // 格式化时间字符串并更新页面
  const newTimerString = `${currentMinutes.toString().padStart(2, "0")}:${currentSeconds.toString().padStart(2, "0")}`;
  document.getElementById("div0").textContent = newTimerString;
}

function startTimer() {
  // 清除旧定时器，避免重复启动
  if (intervalTime) {
    clearInterval(intervalTime);
  }
  
  // 仅在启动时弹出一次输入框
  const timerString = prompt("Enter Num");
  if (!timerString) return; // 用户取消输入则终止流程
  
  // 解析输入时间并赋值给全局变量
  [currentMinutes, currentSeconds] = timerString.split(":").map(Number);
  
  // 立即更新页面显示初始时间
  document.getElementById("div0").textContent = `${currentMinutes.toString().padStart(2, "0")}:${currentSeconds.toString().padStart(2, "0")}`;
  
  // 启动定时器
  intervalTime = setInterval(timerStart, 1000);
}

document.getElementById("butt").addEventListener("click", startTimer);

额外优化说明 #

• 增加旧定时器清除逻辑，防止多次点击按钮导致多个定时器同时运行
• 增加用户取消输入的判断，避免因空值导致代码报错
• 启动时立即更新页面显示初始时间，无需等待第一秒后才显示

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