Gumbi za zagon in ustavitev časovnika v JavaScriptu

Zdaj naredimo dva gumba: ob kliku na prvi se naj časovnik zažene, ob kliku na drugega pa ustavi. Tukaj že vse ne bo tako preprosto in čaka nas past. Da bi razumeli bistvo te past, opisal bom izdelavo kode po korakih.

Torej, naredimo dva gumba:

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

Dobimo povezave do teh gumbov v spremenljivke:

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

Ob kliku na prvi gumb zaženemo časovnik, zapisemo njegovo številko v spremenljivko:

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

In zdaj ustavimo časovnik ob kliku na drugi gumb:

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

// Ustavimo časovnik:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Vendar, če poskušamo zagnati zgornjo kodo, nas čaka presenečenje: ob poskusu ustavitev časovnika se izkaže, da je spremenljivka timerId enaka undefined! Zakaj se je to zgodilo? Ker smo ob zagonu časovnika naredili našo spremenljivko timerId lokalno znotraj funkcije, povezane z gumbom start.

Za rešitev problema naredimo spremenljivko timerId globalno - v tem primeru bo dostopna tako v funkciji za zagon časovnika, kot tudi v funkciji zaustavitve:

let timerId; // naredimo spremenljivko globalno

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

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

Naj bo podana spremenljivka, v kateri sprva shranjena številka 100. Podana sta tudi dva gumba. Ob kliku na prvi gumb zaženite časovnik, ki bo vsako sekundo zmanjšal vrednost spremenljivke za 1 in izpisal novo vrednost v konzolo. Ko vrednost spremenljivke doseže nič - ustavite časovnik.

Ob kliku na drugi gumb ustavite časovnik. Prav tako ustavite časovnik, če drugi gumb ni bil kliknjen, vendar je vrednost spremenljivke dosegla nič.

Nek programer je napisal kodo, ki ob kliku na gumb zažene časovnik, ki izpiše v konzolo trenutni čas:

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

Po zagonu kode pa se je izkazalo, da gumb za ustavitev ne deluje. Popravite napako avtorja kode.

Še en programer je prav tako napisal kodo za rešitev prejšnje naloge:

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

Po zagonu kode pa se je spet izkazalo, da gumb za ustavitev ne deluje. Popravite napako avtorja kode.

Še en programer je prav tako napisal kodo za rešitev prejšnje naloge:

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

Po zagonu kode pa se je spet izkazalo, da gumb za ustavitev ne deluje. Popravite napako avtorja kode.

Še en programer je prav tako napisal kodo za rešitev prejšnje naloge:

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

Po zagonu kode pa se je spet izkazalo, da gumb za ustavitev ne deluje. Popravite napako avtorja kode.

Zgoraj prikazana koda v teoretičnem delu ne upošteva, da je na gumb start mogoče narediti več klikov. Za popravo te težave je mogoče ob kliku na gumb start odpeti dogodek od tega gumba, ob kliku na gumb stop pa ga ponovno pripeti. Popravite težavo.