Tlačidlá na spustenie a zastavenie časovača v JavaScripte

Teraz vytvorme dve tlačidlá: kliknutím na prvé sa časovač spustí a kliknutím na druhé - zastaví. Tu to už nebude také jednoduché a čaká nás úskalie. Aby sme pochopili podstatu tohto úskalia, popíšem vytvorenie kódu krok za krokom.

Takže, vytvoríme dve tlačidlá:

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

Získame odkazy na tieto tlačidlá do premenných:

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

Kliknutím na prvé tlačidlo spustíme časovač, pričom jeho číslo zapíšeme do premennej:

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

A teraz zastavíme časovač kliknutím na druhé tlačidlo:

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

// Zastavíme časovač:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Avšak, ak sa pokúsime spustiť vyššie uvedený kód, čaká nás prekvapenie: pri pokuse o zastavenie časovača sa ukáže, že premenná timerId sa rovná undefined! Prečo sa to stalo? Pretože pri spustení časovača sme urobili našu premennú timerId lokálnou vo vnútri funkcie priradenej k tlačidlu start.

Na vyriešenie problému urobíme premennú timerId globálnou - v tomto prípade bude prístupná ako vo funkcii na spustenie časovača, tak aj vo funkcii na jeho zastavenie:

let timerId; // urobíme premennú globálnou

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

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

Nech je daná premenná, v ktorej sa pôvodne ukladá číslo 100. Sú dané aj dve tlačidlá. Kliknutím na prvé tlačidlo spustite časovač, ktorý každú sekundu zníži hodnotu premennej o 1 a vypíše novú hodnotu do konzoly. Akonáhle hodnota premennej dosiahne nulu - zastavte časovač.

Kliknutím na druhé tlačidlo zastavte časovač. Tiež zastavte časovač, ak druhé tlačidlo nebolo stlačené, ale hodnota premennej dosiahla nulu.

Nejaký programátor napísal kód, ktorý kliknutím na tlačidlo spúšťa časovač, ktorý vypisuje do konzoly aktuálny č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 spustení kódu sa však ukázalo, že tlačidlo zastavenia nefunguje. Opravte chybu autora kódu.

Ďalší programátor tiež napísal kód pre riešenie predchádzajúcej úlohy:

<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 spustení kódu sa však opäť ukázalo, že tlačidlo zastavenia nefunguje. Opravte chybu autora kódu.

Ďalší programátor tiež napísal kód pre riešenie predchádzajúcej úlohy:

<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 spustení kódu sa však opäť ukázalo, že tlačidlo zastavenia nefunguje. Opravte chybu autora kódu.

Ďalší programátor tiež napísal kód pre riešenie predchádzajúcej úlohy:

<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 spustení kódu sa však opäť ukázalo, že tlačidlo zastavenia nefunguje. Opravte chybu autora kódu.

Kód, ktorý som uviedol v teoretickej časti, nezohľadňuje to, že na tlačidlo start je možné vykonať niekoľko kliknutí. Na opravu tohto problému je možné po kliknutí na tlačidlo start odpojiť udalosť od tohto tlačidla, a po kliknutí na tlačidlo stop - pripojiť späť. Opravte problém.