Butonat për nisjen dhe ndaljen e kohëmatësit në JavaScript

Tani le të bëjmë dy butona: duke klikuar në të parën le të fillojë kohëmatësi, dhe duke klikuar në të dytën - le të ndalet. Këtu gjithçka nuk do të jetë aq e thjeshtë dhe ne do të përballemi me një kurth. Për të kuptuar thelbin e këtij kurthi, do të përshkruaj krijimin e kodit hap pas hapi.

Pra, le të bëjmë dy butona:

<button id="start">start</button>
<button id="stop">stop</button>

Marrim referenca për këto butona në variabla:

let start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

Duke klikuar në butonin e parë, nisim kohëmatësin, duke e shkruar numrin e tij në një variabël:

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

Dhe tani le ta ndalim kohëmatësin duke klikuar në butonin e dytë:

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

// Ndalim kohëmatësin:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Megjithatë, nëse përpiqeni të ekzekutoni kodin e mësipërm, ne do të përballemi me një surprizë: kur përpiqemi të ndalim kohëmatësin, do të rezultojë se ndryshorja timerId është e barabartë me undefined! Pse ndodhi kjo? Sepse gjatë nisjes së kohëmatësit ne e bëmë ndryshoren tonë timerId të lokale brenda funksionit të lidhur me butonin start.

Për të zgjidhur problemin, le ta bëjmë variablin timerId global - në këtë rast ai do të jetë i disponueshëm si në funksionin e nisjes së kohëmatësit, ashtu edhe në funksionin e ndaljes:

let timerId; // e bëjmë variablin global

start.addEventListener('click', function() {
	timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Le të themi se është dhënë një variabël, në të cilën fillimisht ruhet numri 100. Janë dhënë gjithashtu dy butona. Duke klikuar në butonin e parë, nisni kohëmatësin, i cili çdo sekondë do të ulë vlerën e variablës me 1 dhe do të shfaqë vlerën e re në konsol. Sa më shpejt që vlera e variablës të arrijë zero - ndaloni kohëmatësin.

Duke klikuar në butonin e dytë, ndaloni kohëmatësin. Gjithashtu ndaloni kohëmatësin nëse butoni i dytë nuk u klikua, por vlera e variablës arriti zero.

Disa programues shkruan kodin, i cili duke klikuar në buton nis kohëmatësin, i cili shfaq në konsol kohën aktuale:

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

Pas nisjes së kodit, megjithatë, doli se butoni i ndaljes nuk funksionon. Korrigjoni gabimin e autorit të kodit.

Një programues tjetër gjithashtu shkroi kod për zgjidhjen e problemit të mëparshëm:

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

Pas nisjes së kodit, megjithatë, përsëri doli se butoni i ndaljes nuk funksionon. Korrigjoni gabimin e autorit të kodit.

Një programues tjetër gjithashtu shkroi kod për zgjidhjen e problemit të mëparshëm:

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

Pas nisjes së kodit, megjithatë, përsëri doli se butoni i ndaljes nuk funksionon. Korrigjoni gabimin e autorit të kodit.

Një programues tjetër gjithashtu shkroi kod për zgjidhjen e problemit të mëparshëm:

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

Pas nisjes së kodit, megjithatë, përsëri doli se butoni i ndaljes nuk funksionon. Korrigjoni gabimin e autorit të kodit.

Kodi i paraqitur nga unë në pjesën teorike nuk merr parasysh faktin se në butonin start mund të bëhen disa klikime. Për të korrigjuar këtë problem, mund të çlidhet ngjarja nga ky buton gjatë klikimit në butonin start, dhe duke klikuar në butonin stop - ta lidhim përsëri. Korrigjoni problemin.