Кнопкі для запуску і спынення таймера на 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();
});

Пасля запуску кода, аднак, зноў аказалася, што кнопка спынення не працуе. Выпраўце памылку аўтара кода.

Прыведзены мною ў тэарэтычнай частцы код не ўлічвае тое, што на кнопку старт можна зрабіць некалькі націскаў. Для выпраўлення гэтай праблемы можна па націску на кнопку старт адвязваць падзею ад гэтай кнопкі, а па націску на кнопку стоп - прывязваць назад. Выпраўце праблему.