Дугмићи за покретање и заустављање тајмера у JavaScript-у

Хајде сада да направимо два дугмета: при клику на прво нека се тајмер покрене, а при клику на друго - нека се заустави. Овде већ све неће бити тако једноставно и чека нас замка. Да бисмо разумели суштину те замке, расписаћемо креирање кода корак по корак.

Дакле, правимо два дугмета:

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

Добијамо референце на ова дугмад у променљиве:

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

При клику на прво дугме покрећемо тајмер, записавши његов идентификатор у променљиву:

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

А сада заустављамо тајмер при клику на друго дугме:

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

// Заустављамо тајмер:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Међутим, ако покушамо да покренемо горе наведени код, чека нас изненађење: при покушају да зауставимо тајмер испоставиће се да променљива timerId једнака undefined! Зашто се то догодило? Зато што смо при покретању тајмера учинили нашу променљиву timerId локалном унутар функције везане за дугме start.

Да бисмо решили проблем, учинићмо променљиву timerId глобалном - у том случају ће бити доступна и у функцији за покретање тајмера и у функцији заустављања:

let timerId; // учинићмо променљиву глобалном

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

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

Нека је дата променљива у којој се иницијално чува број 100. Дата су и два дугмета. При клику на прво дугме покрените тајмер који ће сваке секунде смањивати вредност променљиве за 1 и исписивати нову вредност у конзолу. Чим вредност променљиве достигне нулу - зауставите тајмер.

При клику на друго дугме зауставите тајмер. Такође зауставите тајмер ако друго дугме није притиснуто, али вредност променљиве достигне нулу.

Неки програмер је написао код који при клику на дугме покреће тајмер који исписује у конзолу тренутно време:

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

Након покретања кода, међутим, испоставило се да дугме за заустављање не ради. Исправите грешку аутора кода.

Још један програмер је такође написао код за решавање претходног задатка:

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

Након покретања кода, међутим, поново се испоставило, да дугме за заустављање не ради. Исправите грешку аутора кода.

Још један програмер је такође написао код за решавање претходног задатка:

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

Још један програмер је такође написао код за решавање претходног задатка:

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

Код који сам ја приказао у теоријском делу не узима у обзир да се на дугме старт може извршити више кликова. Да бисмо исправили овај проблем можемо при клику на дугме старт да одвежемо догађај са тог дугмета, а при клику на дугме стоп - да га поново привежемо. Исправите проблем.