Если вкратце, значение тайм-аута записываем в переменную, clearTimeout
функция которая останавливает тайм-аут, в нее передаем это значение
Переменную _start
я вынес с функции update()
потому что, если она будет внутри функции то будет при каждом вызове создаваться новая и у нас не получится сделать таймер.
ПС: в код добавил чуть-чуть комментариев, если что непонятно, спрашивайте
Как-то так :
document.addEventListener("DOMContentLoaded", function(event) {
var timerId;
var _start = new Date(0000, 0, 0, 0, 0, 0, 000);
var clock = document.getElementById('timer');
function update() {
_start.setSeconds(_start.getSeconds() + 1);
var minutes = _start.getMinutes();
if (minutes < 10) minutes = '0' + minutes;
clock.children[0].innerHTML = minutes;
var seconds = _start.getSeconds();
if (seconds < 10) seconds = '0' + seconds;
clock.children[1].innerHTML = seconds;
}
var start = document.querySelector('#start');
var stop = document.querySelector('#stop');
var reset = document.querySelector('#reset');
start.addEventListener('click', function() {
if (!timerId) {
// записываем значение нашего таймера в переменную
timerId = setInterval(update, 1000);
}
});
stop.addEventListener('click', function() {
// останавливаем выполнение функции
// и очищаем переменную интервала, чтобы в функции запуска проверять запущен ли таймер
// так как clearTimeout возвращает undefined то это то что надо
timerId = clearTimeout(timerId);
console.log(clock.children[0].innerHTML + ':' + clock.children[1].innerHTML);
});
reset.addEventListener('click', function() {
clearTimeout(timerId);
timerId = undefined;
_start = new Date(0000, 0, 0, 0, 0, 0, 000);
clock.children[0].innerHTML = '00';
clock.children[1].innerHTML = '00';
});
});
<div id="timer">
<span class="minutes">00</span>
<span class="seconds">00</span>
</div>
<div>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</div>
upd: добавил кнопку reset