Dugmići za pokretanje i zaustavljanje tajmera u JavaScript-u

Hajde sada da napravimo dva dugmeta: pritiskom na prvo neka se tajmer pokrene, a pritiskom na drugo - zaustavi. Ovde već sve neće biti tako jednostavno i čeka nas zamka. Da bismo razumeli suštinu te zamke, opisao bih kreiranje koda korak po korak.

Dakle, pravimo dva dugmeta:

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

Dobijamo reference na ta dugmad u promenljive:

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

Pritiskom na prvo dugme pokrećemo tajmer, upisujući njegov broj u promenljivu:

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

A sada zaustavimo tajmer pritiskom na drugo dugme:

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

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

Međutim, ako pokušamo da pokrenemo gornji kod, čeka nas iznenađenje: prilikom pokušaja zaustavljanja tajmera pokazaće se da je promenljiva timerId jednaka undefined! Zašto se to desilo? Zato što smo prilikom pokretanja tajmera učinili našu promenljivu timerId lokalnom unutar funkcije vezane za dugme start.

Da bismo rešili problem, učinićemo promenljivu timerId globalnom - u ovom slučaju će biti dostupna i u funkciji za pokretanje tajmera, i u funkciji zaustavljanja:

let timerId; // učinićemo promenljivu globalnom

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

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

Neka postoji promenljiva u kojoj se inicijalno čuva broj 100. Data su takođe dva dugmeta. Pritiskom na prvo dugme pokrenite tajmer koji će svake sekunde smanjivati vrednost promenljive za 1 i ispisivati novu vrednost u konzolu. Čim vrednost promenljive dostigne nulu - zaustavite tajmer.

Pritiskom na drugo dugme zaustavite tajmer. Takođe zaustavite tajmer, ako drugo dugme nije pritisnuto, ali vrednost promenljive je dostigla nulu.

Jedan programer je napisao kod koji pritiskom na dugme pokreće tajmer, koji ispisuje u konzolu trenutno vreme:

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

Nakon pokretanja koda, međutim, pokazalo se da dugme za zaustavljanje ne radi. Ispravite grešku autora koda.

Još jedan programer je takođe napisao kod za rešenje prethodnog zadatka:

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

Nakon pokretanja koda, međutim, opet se pokazalo, da dugme za zaustavljanje ne radi. Ispravite grešku autora koda.

Još jedan programer je takođe napisao kod za rešenje prethodnog zadatka:

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

Nakon pokretanja koda, međutim, opet se pokazalo, da dugme za zaustavljanje ne radi. Ispravite grešku autora koda.

Još jedan programer je takođe napisao kod za rešenje prethodnog zadatka:

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

Nakon pokretanja koda, međutim, opet se pokazalo, da dugme za zaustavljanje ne radi. Ispravite grešku autora koda.

Kod koji sam ja naveo u teorijskom delu ne uzima u obzir to da se na dugme start može izvršiti nekoliko pritisaka. Da bismo ispravili ovaj problem, možemo pritiskom na dugme start odvojiti događaj od tog dugmeta, a pritiskom na dugme stop - ponovo ga vezati. Ispravite problem.