Бутони за стартиране и спиране на таймер на JavaScript

Нека сега направим два бутона: при натискане на първия нека таймерът се стартира, а при натискане на втория - да спира. Тук вече няма да е толкова просто и ни очаква подводна камък. За да разберем същността на този подводен камък, ще опиша създаването на кода стъпка по стъпка.

И така, правим два бутона:

<button id="start">start</button>
<button id="stop">stop</button>

Получаваме референции към тези бутони в променливи:

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

При натискане на първия бутон стартираме таймера, записвайки неговия номер в променлива:

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

А сега спираме таймера при натискане на втория бутон:

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

// Спираме таймера:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Въпреки това, ако се опитате да стартирате горния код, ни очаква изненада: при опит за спиране на таймера ще се окаже, че променливата timerId е равна на undefined! Защо се случи това? Защото при стартиране на таймера направихме нашата променлива timerId локална вътре във функцията, свързана с бутона start.

За решаване на проблема нека направим променливата timerId глобална - в този случай тя ще бъде достъпна както във функцията за стартиране на таймера, така и във функцията за спиране:

let timerId; // направихме променливата глобална

start.addEventListener('click', function() {
	timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Нека е дадена променлива, в която първоначално се съхранява числото 100. Дадени са също два бутона. При натискане на първия бутон стартирайте таймер, който всяка секунда ще намалява стойността на променливата с 1 и ще извежда новата стойност в конзолата. Щом стойността на променливата достигне нула - спрете таймера.

При натискане на втория бутон спрете таймера. Също така спрете таймера, ако вторият бутон не е бил натиснат, но стойността на променливата е достигнала нула.

Някой програмист написа код, който при натискане на бутон стартира таймер, който извежда в конзолата текущия момент от време:

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

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

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

След стартиране на кода, обаче, се оказа, че бутонът за спиране не работи. Коригирайте грешката на автора на кода.

Още един програмист също написа код за решаване на предишната задача:

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

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

let timerId;

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

След стартиране на кода, обаче, отново се оказа, че бутонът за спиране не работи. Коригирайте грешката на автора на кода.

Още един програмист също написа код за решаване на предишната задача:

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let start = document.querySelector('start');
let stop  = document.querySelector('stop');

let timerId;

start.addEventListener('click', function() {
	setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Още един програмист също написа код за решаване на предишната задача:

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let start = document.querySelector('start');
let stop  = document.querySelector('stop');

let timerId;

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval();
});

Приведеният от мен в теоретичната част код не отчита това, че върху бутон старт може да се направят няколко натискания. За коригиране на този проблем може при натискане на бутона старт да се откачи събитието от този бутон, а при натискане на бутона стоп - да се закачи обратно. Коригирайте проблема.