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

Սակայն կոդի գործարկումից հետո նորից պարզվեց, որ դադարի կոճակը չի աշխատում: Ուղղեք կոդի հեղինակի սխալը:

Տեսական մասում բերված իմ կոդը հաշվի չի առնում, որ մեկնարկի կոճակի վրա կարելի է մի քանի անգամ կտտացնել: Այս խնդիրը ուղղելու համար կարելի է մեկնարկի կոճակի վրա կտտացնելիս անջատել իրադարձությունը այդ կոճակից, իսկ դադարի կոճակի վրա կտտացնելիս` կրկին կապել այն: Ուղղեք խնդիրը: