Nupud JavaScripti tajeri käivitamiseks ja peatamiseks

Teeme nüüd kaks nuppu: esimesele vajutamisel käivitugu tajer ja teisele vajutamisel - peatu-gu. Siin ei ole kõik nii lihtne ja meid ootab lõks. Selle lõksu olemuse mõistmiseks kirjutan koodi loomise samm-sammult.

Niisiis, teeme kaks nuppu:

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

Saame viited nendele nuppudele muutujatesse:

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

Esimesele nupule vajutamisel käivitame tajri, kirjutades selle numbri muutujasse:

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

Ja nüüd peatame tajri teise nupu vajutamisel:

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

// Peatame tajri:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Kui aga ülaltoodud koodi käivitada, siis ootab meid üllatus: tajri peatamise katse korral selgub, et muutuja timerId võrdub undefined! Miks see nii juhtus? Sest tajri käivitamisel tegime oma muutuja timerId lokaalseks start nupuga seotud funktsiooni sees.

Probleemi lahendamiseks teeme muutuja timerId globaalseks - sel juhul on see kättesaadav nii tajri käivitamise funktsioonis kui ka peatamise funktsioonis:

let timerId; // teeme muutuja globaalseks

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

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

Olgu antud muutuja, milles algselt hoitakse numbrit 100. Samuti on antud kaks nuppu. Esimesele nupule vajutamisel käivitage tajer, mis iga sekund vähendab muutuja väärtust 1 võrra ja väljastab uue väärtuse konsooli. Niipea kui muutuja väärtus jõuab nullini - peatage tajer.

Teisele nupule vajutamisel peatage tajer. Samuti peatage tajer, kui teist nuppu ei vajutatud, kuid muutuja väärtus jõudis nullini.

Mingi programmeerija kirjutas koodi, mis nupule vajutamisel käivitab tajri, mis väljastab konsooli praeguse ajahetke:

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

Pärast koodi käivitamist aga selgus, et peatamisnupp ei tööta. Parandage koodi autori viga.

Veel üks programmeerija kirjutas samuti koodi eelmise ülesande lahendamiseks:

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

Pärast koodi käivitamist aga jälle selgus, et peatamisnupp ei tööta. Parandage koodi autori viga.

Veel üks programmeerija kirjutas samuti koodi eelmise ülesande lahendamiseks:

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

Pärast koodi käivitamist aga jälle selgus, et peatamisnupp ei tööta. Parandage koodi autori viga.

Veel üks programmeerija kirjutas samuti koodi eelmise ülesande lahendamiseks:

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

Pärast koodi käivitamist aga jälle selgus, et peatamisnupp ei tööta. Parandage koodi autori viga.

Minu teoreetilises osas toodud kood ei arvesta seda, et start nuppu saab teha mitu vajutust. Selle probleemi parandamiseks võib start nupule vajutamisel sündmuse lahti siduda, ning stop nupule vajutamisel - uuesti kinnitada. Parandage probleem.