Ajastimen käynnistys- ja pysäytyspainikkeet JavaScriptillä

Tehdään nyt kaksi painiketta: ensimmäistä painaessa ajastin käynnistyy ja toista painaessa se pysähtyy. Tässä tilanteessa kaikki ei olekaan niin yksinkertaista ja meitä odottaa sudenkuoppa. Ymmärtääksemme tämän sudenkuopan olemuksen, kuvataan koodin luomista vaiheittain.

Joten, tehdään kaksi pientä painiketta:

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

Saadaan viittaukset näihin painikkeisiin muuttujiin:

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

Painaessa ensimmäistä painiketta käynnistetään ajastin, tallentaen sen numeron muuttujaan:

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

Ja nyt pysäytetään ajastin toista painiketta painaessa:

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

// Pysäytetään ajastin:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Kuitenkin, jos yritämme suorittaa yllä olevaa koodia, meitä odottaa yllätys: yrittäessä pysäyttää ajastin huomaamme, että muuttuja timerId on yhtä kuin undefined! Miksi näin kävi? Koska ajastinta käynnistettessään teimme muuttujastamme timerId paikallisen start-painikkeen liitetyn funktion sisällä.

Ongelman ratkaisemiseksi teemme muuttujasta timerId globaalin - tällöin se on saatavilla sekä ajastimen käynnistys- että pysäytysfunktioissa:

let timerId; // tehdään muuttujasta globaali

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

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

Olkoon annettu muuttuja, jossa aluksi säilötään numero 100. Annettu on myös kaksi painiketta. Painaessa ensimmäistä painiketta käynnistetään ajastin, joka joka sekunti vähentää muuttujan arvoa 1:llä ja tulostaa uuden arvon konsoliin. Heti kun muuttujan arvo saavuttaa nollan - pysäytetään ajastin.

Painaessa toista painiketta pysäytetään ajastin. Pysäytä myös ajastin, jos toista painiketta ei painettu, mutta muuttujan arvo saavutti nollan.

Eräs ohjelmoija kirjoitti koodin, joka painaessa painiketta käynnistää ajastimen, joka tulostaa konsoliin nykyisen ajanhetken:

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

Koodin käynnistyksen jälkeen kuitenkin kävi ilmi, että pysäytyspainike ei toimi. Korjaa koodin tekijän virhe.

Toinen ohjelmoija kirjoitti myös koodin edellisen tehtävän ratkaisemiseksi:

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

Koodin käynnistyksen jälkeen kuitenkin kävi jälleen ilmi, että pysäytyspainike ei toimi. Korjaa koodin tekijän virhe.

Toinen ohjelmoija kirjoitti myös koodin edellisen tehtävän ratkaisemiseksi:

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

Koodin käynnistyksen jälkeen kuitenkin kävi jälleen ilmi, että pysäytyspainike ei toimi. Korjaa koodin tekijän virhe.

Toinen ohjelmoija kirjoitti myös koodin edellisen tehtävän ratkaisemiseksi:

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

Koodin käynnistyksen jälkeen kuitenkin kävi jälleen ilmi, että pysäytyspainike ei toimi. Korjaa koodin tekijän virhe.

Teoreettisessa osassa esittämäni koodi ei ota huomioon sitä, että start-painikkeeseen voidaan tehdä useita painalluksia. Tämän ongelman korjaamiseksi voidaan start-painiketta painaessa irroittaa tapahtuma tästä painikkeesta, ja stop-painiketta painaessa liittää se takaisin. Korjaa ongelma.