Тугмаҳо барои оғоз ва ист кардани таймер дар 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();
});

Пас аз оғози рамз, аммо, боз маълум шуд, ки тугмаи ист кардан кор намекунад. Ислоҳ кунед хатои муаллифи рамз.

Рамзи овардашудаи ман дар қисмати назариявӣ онро ба назар намегирад, ки ба тугмаи start чанд пахш кардан мумкин аст. Барои ислоҳи ин мушкилот метавон бо пахш кардан ба тугмаи start воқеаро аз ин тугма ҷудо кард, ва бо пахш кардан ба тугмаи stop - боз бастани онро. Мушкилотро ислоҳ кунед.