按钮单击事件后如何正确倒计时秒数

Question

首先，我是 Javascript 的新手，所以请原谅我的天真。

我正在开发一个倒数计时器，以从单击按钮开始。 计时器确实会在单击时启动，但是，秒计时器会立即更改（减 1），然后每秒进行一次倒计时（根据需要）。

例如：定时器在 25:00。 单击按钮，计时器立即下降到 24:59（没有第二次通过），然后正常进入倒计时。

先感谢您。

let min = 25;
let sec = 60;
let remainSec = sec % 1;

let minText = document.getElementById('minutes');
minText.innerText = min;      //declared outside of sample

let secondsText = document.getElementById('seconds'); 
secondsText.innerText = remainSec + '0'  ;     //declared outside of sample

startTime.addEventListener('click', decrement); //declared outside of sample

function decrement() {
  sec--;
  secondsText.innerText = sec;
  if (sec < 10){
    secondsText.innerText = '0' + sec;
  }
  setInterval(decrement, 1000);
}

Answer 1

您可以使用超时：

startTime.addEventListener('click', function() { setTimeout(decrement,1000) });

Answer 2

您不需要减量 function 中的 setInterval，这样它将被多次调用，并且减量将超过每秒一次。

做这样的事情：

startTime.addEventListener('click', decrement); //declared outside of sample

let interval;

function startDecrement() {
    if (!interval) { // avoid duplicate interval
        interval = setInterval(decrement, 1000);
    }
}

function decrement() {
  sec--;
  secondsText.innerText = sec;
  if (sec < 10){
    secondsText.innerText = '0' + sec;
  }
}

另一个很酷的东西是存储间隔允许您使用 [clearInterval()]( https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval ) function 取消它。

function stopDecrement() {
    clearInterval(interval);
    interval = null;
}

附加信息

检查间隔是否已声明的if语句有效，因为 javascript 使用 with 时，Truthy 或 Falsy 值中的任何值! （ NOT运算符）。 请参阅了解 JavaScript 真假

因此，当您调用setInterval()时，它会返回一个唯一的非零 integer 来标识间隔，以便您将来取消它。

在第一次运行时， interval变量是空的，因为我们只是在没有值的情况下声明了它。

let interval;
console.log(interval); // undefined
console.log(!interval); // true 

interval = setInterval(decrement, 1000);

console.log(interval); // 1
console.log(!interval); // false