Почему ускоряется таймер при повторном нажатии на кнопку?

Question

[Роман]

Всем привет. Учу js. Есть таблица. На каждую ячейку повешано событие (клик). При клике запускается обратный отсчет. Но если кликнуть еще на другие ячейки, то таймер ускоряется. Нужно запустить его единожды. Как исправить?

<p id="time">00:00</p>

<table>
	
</table>

td {
	width: 50px;
	height: 50px;
	border: 1px solid black;
	text-align: center;
	cursor: pointer;
}

let timer = 119;
let time = document.querySelector('#time');

function updateTimer () {

	let minutes = Math.floor(timer / 60);
	let seconds = timer % 60;
	if (seconds < 10) {
		seconds = '0' + seconds;
	}
	if (minutes < 10) {
		minutes = '0' + minutes;
	}
	time.innerHTML = `${minutes}:${seconds}`;
	timer--;

}


function randomInteger(min, max) {  

	let rand = min + Math.random() * (max + 1 - min);
	return Math.floor(rand);

}

let arrWinNums = [];

for (var i = 0; i < 10; i++) { 
	if (arrWinNums.length < 10) {
		let numArr = randomInteger(1,100);
		if (arrWinNums.indexOf(numArr) == -1) {
			arrWinNums.push(numArr);
		} else {
			i = 0;
		}
	} else {
		break;
	}
}

let table = document.querySelector('table');  
let count = 1;

for (var i = 0; i < 10; i++) {
	let tr = document.createElement('tr');
	table.appendChild(tr);
	for (var j = 0; j < 10; j++) {
		let td = document.createElement('td');
		td.innerHTML = count++;
		td.addEventListener('click', function(){ 
			let intervalTimer = setInterval(updateTimer, 1000);
			if (arrWinNums.includes(+this.innerHTML)) {
				this.style.background = 'red';
			} else {
				this.style.background = 'yellow';
			}
		});
		tr.appendChild(td);
	};
};

Comments

[Сергей Сергей]

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