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

Назарий қисмда менинг келтирган кодим "старт" тугмасига bир неча марта босилишини инобатга олмайди. Ушбу муаммони ҳал этиш учун "старт" тугмаси босилганда вокеани ушбу тугмадан узоклаштириш, "стоп" тугмаси босилганда эса қайта боглаш мумкин. Муаммони тўғриланг.