javascript - setInterval 变为负数

Question

我正在构建这个番茄钟应用程序。

https://jsfiddle.net/yvrs1e35/

我的计时器没有什么问题。

startBtn.addEventListener('click', function(){

    minutes.innerHTML = sessionTime.innerHTML - 1
    seconds.innerHTML = 59


    var timer = setInterval(()=>{
        if(Number(minutes.innerHTML) != 0 && Number(seconds.innerHTML) != 0){
            seconds.innerHTML--  
            if(Number(seconds.innerHTML) == 0){
                seconds.innerHTML = 59;
                minutes.innerHTML--
            }   
        }else if (Number(minutes.innerHTML) == 0 && Number(seconds.innerHTML) == 0){
             clearInterval(timer)
        }       
    },1000)






    resetBtn.addEventListener('click', function(e){
        e.preventDefault();
        breakTime.innerHTML = 5
        sessionTime.innerHTML = 25
        minutes.innerHTML = "00"
        seconds.innerHTML = "00"
        clearInterval(timer) 
    })

    pauseBtn.addEventListener('click', function(e){
        e.preventDefault();

    })

})

如果计时器的间隔时间超过 1 分钟，它就会起作用。
如果它不到 1 分钟，即使我在间隔内有这个

else if (Number(minutes.innerHTML) == 0 && Number(seconds.innerHTML) == 0){
             clearInterval(timer)
        }       

秒和分钟为负数(0:0 后，计时器显示-1:59)

我虽然 else if 语句会在分钟和秒都达到 0 时停止间隔，但由于某种原因它不会。

@also 如果我多次按 startbtn，计时器启动多次，秒数快 2x 3x 4x，我怎样才能停止 startbtn 直到计时器达到 0:0？

我能得到任何帮助吗？

Answer 1

.innerHTML是一项昂贵的手术。像这样在 DOM 中存储数据是一种反模式；无缘无故地提取和操作它对数字进行字符串化和去字符串化。将状态存储在 JS 脚本中并仅在需要进行渲染更改时更新 DOM 内容。换句话说，将其视为只写。

间隔运行多次；您需要一个标志来防止重新触发(或 clearInterval 在重置之前)。设置interval至undefined是指示时钟未运行的好方法。

最后，setInterval冷却时间为 1000 是计时的糟糕选择。根据调度中断和其他随机因素，它会漂移很多； 1000 表示“在触发回调之前至少等待 1000 毫秒”。相反，请使用 Date 为了准确性。

我将完全以毫秒为单位工作，并且仅为格式化输出转换为分钟和秒。这遵循了第一段中描述的关于将表示与逻辑分离的原则。

这是一个概念证明来说明上述几点。当然，如果你是为了好玩而做番茄钟，请坚持 setInterval(() => ..., 1000)确实使代码更简单，但我认为从几个 Angular 来看它是有启发性的。

const padTime = t => (Math.floor(t) + "").padStart(2, 0);
const timeFmt = t => `${padTime(t / 60000)}:${
                        padTime(t / 1000 % 60)}`;

const run = () => {
  interval = setInterval(() => {
    if (interval) {
      display.textContent = timeFmt(end - Date.now());
    }
    
    if (Date.now() >= end) {
      clearInterval(interval);
      interval = undefined;
    }
  }, 100);
};

let interval;
let pause;
const initialMinutes = 2;
const duration = initialMinutes * 60000;
const time = Date.now();
let end = time + duration;
const display = document.querySelector("h1");
display.textContent = timeFmt(end - time);
const [startBtn, pauseBtn, resetBtn] =
  document.querySelectorAll("button");

startBtn.addEventListener("click", e => {
  clearInterval(interval);

  if (!interval) {
    if (pause) {
      end += Date.now() - pause;
      pause = undefined;
    }
    else {
      end = Date.now() + duration;
    }
  }
  
  run();
});

resetBtn.addEventListener("click", e => {
  clearInterval(interval);
  interval = undefined;
  const time = Date.now();
  end = time + duration;
  display.textContent = timeFmt(end - time);
});

pauseBtn.addEventListener("click", e => {
  if (interval) {
    pause = Date.now();
    clearInterval(interval);
    interval = undefined;
  }
});

<h1></h1>
<div>
  <button>start</button>
  <button>pause</button>
  <button>reset</button>
</div>