Botones para iniciar y detener un temporizador en JavaScript

Ahora creemos dos botones: al hacer clic en el primero, que el temporizador se inicie, y al hacer clic en el segundo, que se detenga. Aquí las cosas no serán tan simples y nos espera una trampa. Para entender la esencia de esta trampa, desglosaré la creación del código paso a paso.

Entonces, hacemos dos botones:

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

Obtenemos referencias a estos botones en variables:

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

Al hacer clic en el primer botón, iniciamos el temporizador, guardando su número en una variable:

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

Y ahora detengamos el temporizador al hacer clic en el segundo botón:

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

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

Sin embargo, si intentas ejecutar el código anterior, nos llevaremos una sorpresa: al intentar detener el temporizador, resultará que la variable timerId es igual a undefined! ¿Por qué pasó esto? Porque al iniciar el temporizador hicimos que nuestra variable timerId fuera local dentro de la función vinculada al botón start.

Para solucionar el problema, hagamos la variable timerId global; en este caso, estará disponible tanto en la función de inicio del temporizador como en la función de detención:

let timerId; // hacemos la variable global

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

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

Supongamos que tenemos una variable que inicialmente almacena el número 100. También se dan dos botones. Al hacer clic en el primer botón, inicia un temporizador que cada segundo disminuirá el valor de la variable en 1 y mostrará el nuevo valor en la consola. Cuando el valor de la variable llegue a cero, detén el temporizador.

Al hacer clic en el segundo botón, detén el temporizador. También detén el temporizador si el segundo botón no fue presionado, pero el valor de la variable llegó a cero.

Un programador escribió un código que al hacer clic en un botón inicia un temporizador, que muestra en la consola el momento actual de tiempo:

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

Sin embargo, después de ejecutar el código, resultó que el botón de parada no funciona. Corrige el error del autor del código.

Otro programador también escribió código para resolver la tarea 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);
});

Sin embargo, después de ejecutar el código, resultó nuevamente, que el botón de parada no funciona. Corrige el error del autor del código.

Otro programador también escribió código para resolver la tarea 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);
});

Sin embargo, después de ejecutar el código, resultó nuevamente, que el botón de parada no funciona. Corrige el error del autor del código.

Otro programador también escribió código para resolver la tarea 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();
});

Sin embargo, después de ejecutar el código, resultó nuevamente, que el botón de parada no funciona. Corrige el error del autor del código.

El código que mostré en la parte teórica no tiene en cuenta que se puede hacer clic varias veces en el botón de inicio. Para corregir este problema, al hacer clic en el botón de inicio se puede desvincular el evento de este botón, y al hacer clic en el botón de parada, volver a vincularlo. Corrige el problema.