Копчиња за стартување и запирање на тајмер во 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();
});

Наведениот код од мене во теоретскиот дел не го зема предвид тоа што на копчето старт може да се направат повеќе кликнувања. За исправка на овој проблем може при кликнување на копчето старт да се одврзе настанот од ова копче, а при кликнување на копчето стоп - да се приврзе повторно. Исправете го проблемот.