提示运行多次，我希望每次点击只运行一次

Question

我正在构建一个拳击或倒计时器。我让它工作并更新 div 内容，但是当我添加提示时，它会永远被调用。我可以看到它更新了 div，但它永远不会让我的其余代码运行。任何前进的建议将不胜感激。

function timerStart() {
 let timerString = prompt("Enter Num");
 /*let timerString = document.getElementById("div0").textContent;*/
 let [minutes, seconds] = timerString.split(":").map(Number);

 if (seconds > 0) {
   seconds--;
   console.log(seconds);
 } else if (minutes > 0) {
   minutes--;
   seconds = 59;
   console.log(minutes);
 } else {
   clearInterval(intervalTime);
   return;
 }
 let newTimerString = `${minutes.toString().padStart(2, "0")}:${seconds
   .toString()
   .padStart(2, "0")}`;
 document.getElementById("div0").textContent = newTimerString;
}

function startTimer() {
 intervalTime = setInterval(timerStart, 1000);
}

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

我尝试将提示放在函数之外，但这显然不起作用。我试图在提示结束时返回，但停止了该功能。

Answer 1

制作另一个函数，首先提示然后调用间隔。为了将时间值从一个函数传递到另一个函数，我使用全局变量。

var minutes, seconds

function timerStart() {

  if (seconds > 0) {
    seconds--;
    console.log(seconds);
  } else if (minutes > 0) {
    minutes--;
    seconds = 59;
    console.log(minutes);
  } else {
    clearInterval(intervalTime);
    return;
  }
  let newTimerString = `${minutes.toString().padStart(2, "0")}:${seconds
   .toString()
   .padStart(2, "0")}`;
  document.getElementById("div0").textContent = newTimerString;
}

function startTimer() {
  intervalTime = setInterval(timerStart, 1000);
}

function promptThenStartTimer() {
  let timerString = prompt("Enter Num");
  [minutes, seconds] = timerString.split(":").map(Number);
  startTimer()
}


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

<button id="butt">click</button>
<div id="div0"></div>