ღილაკები ტაიმერის დასაწყებად და შესაჩერებლად 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();
});

ჩემს მიერ თეორიულ ნაწილში მოცემული კოდი არ ითვალისწინებს იმას, რომ სტარტის ღილაკზე შესაძლებელია რამდენიმე დაწკაპუნების გაკეთება. ამ პრობლემის გამოსასწორებლად შესაძლებელია სტარტის ღილაკზე დაწკაპუნებისას მოვხსნათ მოვლენა ამ ღილაკიდან, ხოლო სტოპის ღილაკზე დაწკაპუნებისას - მივაბათ ისევ. შეასწორეთ პრობლემა.