@yagyar001
Начинающий back-end и front-end

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

Всем привет. Учу 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);
	};
};
  • Вопрос задан
  • 99 просмотров
Пригласить эксперта
Ответы на вопрос 1
Bavashi
@Bavashi
Самый простой способ это запретить еще раз нажимать на ячейки, если это вписывается в логику работы вашей программы. Например так:
let check = true;

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(){ 
    	if (check) {
      let intervalTimer = setInterval(updateTimer, 1000);
      if (arrWinNums.includes(+this.innerHTML)) {
        this.style.background = 'red';
      } else {
        this.style.background = 'yellow';
      }
      check = false;
      }
    });

P.S. Только по-моему у вас еще таймер в минуса может уходить.

Update: подправил минуса у таймера и чтобы можно было еще раз на ячейки нажимать.

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

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--;
  if (timer < 0){ clearInterval(intervalTimer); }
}



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;
let check = true;

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(){ 
    	if (arrWinNums.includes(+this.innerHTML)) {
        this.style.background = 'red';
      } else {
        this.style.background = 'yellow';
      }
      if (check) {
      intervalTimer = setInterval(updateTimer, 1000);
      check = false;
      }
    });
    tr.appendChild(td);
  };
};
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы