JS getter 和间隔在倒数计时器中无法正常工作

Question

为了理解这个理论是如何运作的，我们的想法是创建一个带有分钟和秒的倒计时，一个 btn 到 start/continue 另一个暂停。

第一次启动需要减1分钟。 （速度和秒数发生变化，因此速度更快，无论如何它应该工作相同） 根据我的阅读，这可以通过对象内部的 getter 来完成检测时间是否等于初始时间，如果是，则进行更改。在这种情况下，如何将原始 var min 值从 3 更改为 2 而不是在对象内部创建新的 var？

部分有效，现在的问题是：按Start后，如果在开始倒计时时按Pause，再按Start继续，显示undefined而不是2。为什么这个值丢失了？如何防止这种情况？另外，暂停和恢复后，分钟和秒的间隔不同步。

这个 1 分钟的变化也会导致当到达最后一分钟时，秒数跳到 0，而不是一个接一个地下降，直到达到 0。

整个倒计时可以用更优雅的方式重建，但我只是不明白为什么它不能像现在这样工作背后的逻辑，也不知道如何解决这个问题。

如有任何帮助，我们将不胜感激。谢谢！

var initialmin = 3;
var min = 3;
var sec = 20;

//Display initial time
document.getElementById("min").innerHTML = initialmin;
if (sec = 20) {
  document.getElementById("sec").innerHTML = "00";
}

//subtract 1 min when countdown starts the first time
//How to change value of var min instead of creating timeleft.minleft?
timeleft = {
  get minleft() {
    if ((min == initialmin) && (sec == 20)) {
      console.log("first start: rest 1 min");
      return min = min - 1;
    }
  }
} //end timeleft


function start() {
  //Change 00 seconds placeholder with current seconds
  document.getElementById("sec").innerHTML = sec;

  //show 1 less minute than initial min
  document.getElementById("min").innerHTML = timeleft.minleft;

  //subtract minutes every 20sec
  subtractminutes = setInterval(function() {

    min -= 1;
    document.getElementById("min").textContent = min;
    console.log(min);

    //when reach 0 minutes, stop subtracting minutes
    if (min == 0) {
      console.log("min done");
      clearInterval(subtractminutes);

    }
  }, 2000);

  subtractseconds = setInterval(function() {
    //restart 20sec countdown if there are still minutes left
    sec--;
    document.getElementById("sec").textContent = sec;
    if ((min >= 1) && (sec == 0))
      sec += 20;

    //when last min is reached, stop counting seconds once reached 0
    if ((min == 0) && (sec == 0)) {
      console.log("sec done");
      clearInterval(subtractseconds);
    }

  }, 100);

}

function stop() {
  clearInterval(subtractseconds);
  clearInterval(subtractminutes);
}

<div id="controls">
  <button id="start" onclick="start()">Start</button>
  <button id="stop" onclick="stop()">Stop</button>
</div>

<p id="min"></p>
<p id="sec"></p>

Answer 1

当你重新启动计时器时，你在getter方法中的条件是false，默认情况下是returnundefined。

timeleft = {
  get minleft() {
    if ((min == initialmin) && (sec == 20)) { // condition here is false
      console.log("first start: rest 1 min");
      return min = min - 1;
    }
    // return undefined by default
  }
}

JS getter 和间隔在倒数计时器中无法正常工作

JS getter and intervals not working properly in countdown timer

javascript

countdown

getter