Jquery. Почему не работает снова старт на таймере

Question

Создаю таймер, с тремя кнопками старт, пауза и сброс. После паузы не запускается снова старт. Буду благодарна за любую подсказку.

<div>
<span id="minutes">00</span>:
<span id="seconds">00</span>
</div>
<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="reset">Reset</button>
   
<script>          
   let second = 0;
   let minute = 0;
   let beginning = false;

   let addOneMinute = () => {
     minute++;
     if(minute < 10) {
      $('#minutes').text('0' + minute)
     } else if(minute >= 10){
      $('#minutes').text(minute)     
     }    
   };
      
let timer = () => {
  if(!beginning) {
    second++;
    if(second < 10) {
     $('#seconds').text('0' + second)
    } else if(second <= 60){
     $('#seconds').text(second)     
    } else if(second > 60) {
      second = 0;
      addOneMinute();
    }
  }  
}

let pause = $('#pause').on('click', function() {
  beginning = true;
 clearInterval(start)
});

$('#start').on('click', function() {
 let start = setInterval(timer, 1000); 
});

$('#reset').on('click', function() {
    clearInterval(timer);
  beginning = false;
  second = 0;
  minute = 0;
})

https://jsfiddle.net/botagoz/Lgy7oh1b/12/

Answer 1

Предположу, что дело в том, что у вас в функции start нет присвоения переменной

 beginning = false;

А в условии таймера есть проверка:

if(!beginning)

А в ситуации когда после паузы мы жмем старт сейчас у нас значение:

beginning = true;

По этому таймер и не стартует,т.к не проходит по условию.

Answer 2

Ваша функция основывается назначении beginning

let timer = () => {
if(!beginning) {...}}

В функции "пауза" вы устанавливаете значение beginning = true, но при "старте" вы его не меняете. Потому у вас этот метод и не срабатывает.

И еще, область видимости переменных let ограничивается блоком. Т.е. переменная start у вас будет видна только в функции. Потому когда вы обращаетесь к clearInterval(start);, метод будет работать не так, как вы бы хотели.

В итоге, вам необходимо объявить start в самом начале, чтобы она была видна для обеих функций.

<script>   
  let start = 0;

И в функции start не забыть изменить значение для beginning:

 $('#start').on('click', function() {
    beginning = false;
    start = setInterval(timer, 1000); 
 });

БЛОГ НА HUSL

Jquery. Почему не работает снова старт на таймере

Ответы (2 шт):