Botões para iniciar e parar um temporizador em JavaScript

Agora vamos criar dois botões: ao clicar no primeiro, o temporizador deve iniciar, e ao clicar no segundo - parar. Aqui já não será tão simples e nos espera uma armadilha. Para entender a essência dessa armadilha, vou descrever a criação do código passo a passo.

Então, vamos fazer dois botõezinhos:

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

Obtemos referências para esses botões em variáveis:

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

Ao clicar no primeiro botão, iniciamos o temporizador, armazenando seu número em uma variável:

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

E agora vamos parar o temporizador ao clicar no segundo botão:

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

// Paramos o temporizador:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

No entanto, se tentarmos executar o código acima, nos surpreenderemos: ao tentar parar o temporizador, veremos que a variável timerId é igual a undefined! Por que isso aconteceu? Porque ao iniciar o temporizador, tornamos nossa variável timerId local dentro da função vinculada ao botão start.

Para resolver o problema, vamos tornar a variável timerId global - neste caso, ela estará acessível tanto na função de iniciar o temporizador quanto na função de parada:

let timerId; // tornamos a variável global

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

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

Suponha que exista uma variável que inicialmente armazena o número 100. Também existem dois botões. Ao clicar no primeiro botão, inicie um temporizador que a cada segundo diminuirá o valor da variável em 1 e exibirá o novo valor no console. Assim que o valor da variável atingir zero - pare o temporizador.

Ao clicar no segundo botão, pare o temporizador. Também pare o temporizador se o segundo botão não for clicado, mas o valor da variável atingir zero.

Um determinado programador escreveu um código que ao clicar em um botão inicia um temporizador, exibindo no console o horário atual:

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

Após a execução do código, no entanto, descobriu-se que o botão de parada não funciona. Corrija o erro do autor do código.

Outro programador também escreveu um código para resolver a tarefa anterior:

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

Após a execução do código, no entanto, novamente descobriu-se que o botão de parada não funciona. Corrija o erro do autor do código.

Outro programador também escreveu um código para resolver a tarefa anterior:

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

Após a execução do código, no entanto, novamente descobriu-se que o botão de parada não funciona. Corrija o erro do autor do código.

Outro programador também escreveu um código para resolver a tarefa anterior:

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

Após a execução do código, no entanto, novamente descobriu-se que o botão de parada não funciona. Corrija o erro do autor do código.

O código que apresentei na parte teórica não leva em consideração que o botão iniciar pode ser clicado várias vezes. Para corrigir esse problema, é possível, ao clicar no botão iniciar, desvincular o evento desse botão, e ao clicar no botão parar - vinculá-lo novamente. Corrija o problema.