Как отследить событие работающего таймера?

Question

[Роман]

Есть 3 кнопки: СТАРТ, СТОП и ОЧИСТИТЬ. При нажатии на СТАРТ запускается таймер. При нажатии на СТОП соответственно останавливается. Хочу, чтобы при нажатии на кнопку ОЧИСТИТЬ, если таймер остановлен, то очистить таймер (таймер у меня в элементе <p>). Как это можно сделать?

<input type="button" id="start" value="Старт">
<input type="button" id="stop" value="Стоп">
<input type="button" id="clearText" value="Очистить">
<p class="timer"></p>

let start = document.querySelector('#start');
let stop = document.querySelector('#stop');
let clearTextVar = document.querySelector('#clearText');
let timer = document.querySelector('.timer');

let startTimer;
timer.innerHTML = 0;

function timerStart(){
	startTimer = setInterval(function(){
		timer.innerHTML++;
	}, 1000);
	start.removeEventListener('click', timerStart);
};

function timerStop(){
	clearInterval(startTimer);
	start.addEventListener('click', timerStart);
};

function clearText() {
	timer.innerHTML = '';
}

start.addEventListener('click', timerStart);

stop.addEventListener('click', timerStop);

clearTextVar.addEventListener('click', clearText);

Answer 1

[Сергей Соколов]

в clearText() выполнять timer.innerHTML = 0;

Вообще не айс держать в разметке значения. Лучше в какой-то переменной хранить число, и по таймеру его отображать в div:

Таймеры в JS далеко не идеально точны. Если вкладка браузера перестаёт быть активной, таймеры в ней станут реже тикать. Поэтому не считайте setInterval(func, 1000) идеальной секундной стрелкой.

Если важна точность, лучше запоминать момент времени const D = new Date(); и по таймеру брать текущее время и считать разницу с тем моментом: let seconds = Math.round((new Date() - D) / 1000)

Событие таймера при этом можно вызывать чаще, чем раз в секунду: скажем, раз в 200 мс.