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();
});

Теориялық бөлімде келтірілген менің кодым старт түймесіне бірнеше рет басу мүмкіндігін есепке алмайды. Бұл мәселені түзету үшін старт түймесін басқанда осы түймеден оқиғаны ажыратып, стоп түймесін басқанда қайта байлауға болады. Мәселені түзетіңіз.