单击按钮后如何停止或禁用按钮（setInterval）？答案

【问题标题】：How do you stop or disable a button after I have clicked it (setInterval)?单击按钮后如何停止或禁用按钮（setInterval）？
【发布时间】：2022-02-18 03:55:02
【问题描述】：

我做了一个倒数计时器，开始按钮以 setInterval 开始计数。我的问题是，如果用户不小心再次点击开始按钮，它会开始另一个间隔并加快倒计时。

const timeH = document.querySelector("h1");

let timeSecond = prompt("Enter minutes here") * 60;

displayTime(timeSecond);

function displayTime(second) {
  const min = Math.floor(second / 60);
  const sec = Math.floor(second % 60);
  timeH.innerHTML = `${min < 10 ? "0" : ""}${min}:${sec < 10 ? "0" : ""}${sec}`;
}

function endTime() {
  timeH.innerHTML = "TIME OUT";
}

function countDown() {
  timeSecond--;
  displayTime(timeSecond);

  if (timeSecond <= 0 || timeSecond < 1) {
    endTime();
  }
}

document.querySelector(".start").addEventListener("click", () => {
  count = setInterval(countDown, 1000);
});

document.querySelector(".stop").addEventListener("click", () => {
  clearInterval(count);
});

document.querySelector(".reset").addEventListener("click", () => {
  clearInterval(count);
  timeSecond = prompt("Enter minutes here") * 60;

  displayTime(timeSecond);
});

【问题讨论】：

标签： javascript setinterval

【解决方案1】：

改变

document.querySelector(".start").addEventListener("click", () => {
  count = setInterval(countDown, 1000);
});

document.querySelector(".stop").addEventListener("click", () => {
  clearInterval(count);
});

document.querySelector(".reset").addEventListener("click", () => {
  clearInterval(count);
  timeSecond = prompt("Enter minutes here") * 60;

  displayTime(timeSecond);
});

到

let startButton = document.querySelector(".start");
let stopButton = document.querySelector(".stop");

startButton.addEventListener("click", () => {
  count = setInterval(countDown, 1000);
  
  startButton.disabled = true;
});

stopButton.addEventListener("click", () => {
  clearInterval(count);

  startButton.disabled = false;
});

document.querySelector(".reset").addEventListener("click", () => {
  clearInterval(count);
  startButton.disabled = false;

  timeSecond = prompt("Enter minutes here") * 60;

  displayTime(timeSecond);
});

disabled 属性在设置为 true 时禁用按钮。您可以在 MDN 上阅读有关该属性的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/disabled

【讨论】：

谢谢！对 javascript 来说还是个新手。这成功了。
在某些时候每个人都是新人。继续前进！

【解决方案2】：

所以添加一个检查它是否正在运行

document.querySelector(".start").addEventListener("click", () => {
  if (count) return;
  count = setInterval(countDown, 1000);
});

function stopTimer() {
  if (!count) return;
  clearInterval(count);
  count = null;
}

document.querySelector(".stop").addEventListener("click", stopTimer);

document.querySelector(".reset").addEventListener("click", () => {
  stopTimer();
  timeSecond = prompt("Enter minutes here") * 60;
  displayTime(timeSecond);
});

【讨论】：