приостановить / воспроизвести таймер, используя javascript

Question

Я не опытный в Javascript. Я пытаюсь установить таймер на 5 минут для тренировки. Однако, когда я нажимаю кнопку воспроизведения, таймер уменьшается, но когда я снова нажимаю кнопку воспроизведения, он перекрывается с текущим таймером.

Как приостановить таймер и разрешить его нажатие только один раз? Должен ли я установить другую кнопку для паузы? Это код:

Answer 1

Вы можете создать переменную для хранения timerId и очистить с помощью clearInterval

function pause() {
  clearInterval(timerId);
}

var timerId;
var min = 0;
                    var sec = 59;
                    var isplay = true;
                    document.getElementById('pause').style.display = 'none';
                function startTimer() {
                    var btton = document.getElementById('start').style.display = 'none';
                    document.getElementById('pause').style.display = 'inline';
                    
                    timerId = setInterval(function () {
                        document.getElementById("timer").innerHTML = min + ":" + sec;
                        sec--;
                        if (sec == -1) {
                            min--;
                            sec = 59;
                        }
                        if (min == -1) {
                            clearTimeout();
                        }
                        if (sec < 10) {
                            sec = "0" + sec;
                        }

                    }, 1000);
                }

function pause() {
  clearInterval(timerId);
  document.getElementById('start').style.display = 'inline';
  document.getElementById('pause').style.display = 'none';
}

<div id="timer">

                <div id="time">5:00</div>
            </div>
            <button id="start" onclick="return startTimer()">Start</button>
            
            <button id='pause' onclick="pause()">Pause</button>