JS геттер и интервалы не работают должным образом в таймере обратного отсчета - PullRequest
Новая
       34

JS геттер и интервалы не работают должным образом в таймере обратного отсчета

0 голосов
/ 30 июня 2018

Пытаясь понять, как работает теория, идея состоит в том, чтобы создать обратный отсчет с минутами и секундами, с btn для запуска / продолжения и другим для паузы.

Необходимо вычесть 1 минуту при первом запуске. (скорость и количество секунд изменились, поэтому он идет быстрее, в любом случае он должен работать одинаково) Из того, что я прочитал, это можно сделать с помощью геттера внутри объекта, чтобы определить, если время = начальное время и, если да, внесите изменения. В этом случае, как изменить исходное значение переменной min с 3 на 2 вместо создания новой переменной внутри объекта?

Это частично работает, теперь проблема заключается в следующем: после нажатия кнопки «Пуск», если вы нажмете «Пауза», когда начнется обратный отсчет, затем снова нажмите «Пуск», чтобы продолжить, вместо «2» отображается значение «undefined». Почему значение теряется? Как это предотвратить? Кроме того, после паузы и возобновления интервалы для минут и секунд не синхронизированы.

Это 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>

1 Ответ

0 голосов
/ 30 июня 2018

Когда вы перезапускаете таймер, ваше условие в методе получения равно false, и оно возвращает undefined по умолчанию. 

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
  }
}
...