Pulsanti per avviare e fermare il timer in JavaScript

Ora creiamo due pulsanti: cliccando sul primo il timer si avvia, e cliccando sul secondo - si ferma. Qui le cose non saranno così semplici e ci aspetta una trappola. Per capire l'essenza di questa trappola, descriverò la creazione del codice passo dopo passo.

Quindi, creiamo due pulsanti:

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

Otteniamo i riferimenti a questi pulsanti in variabili:

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

Cliccando sul primo pulsante avviamo il timer, salvando il suo ID in una variabile:

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

E ora fermiamo il timer cliccando sul secondo pulsante:

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

// Fermiamo il timer:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Tuttavia, se provi a eseguire il codice sopra, ci sarà una sorpresa: quando tenti di fermare il timer, risulterà che la variabile timerId è undefined! Perché è successo? Perché all'avvio del timer abbiamo reso la nostra variabile timerId locale all'interno della funzione associata al pulsante start.

Per risolvere il problema, rendiamo la variabile timerId globale - in questo caso sarà accessibile sia nella funzione di avvio del timer, sia nella funzione di arresto:

let timerId; // rendiamo la variabile globale

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

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

Sia data una variabile che inizialmente contiene il numero 100. Sono dati anche due pulsanti. Cliccando sul primo pulsante, avvia un timer che ogni secondo diminuirà il valore della variabile di 1 e stamperà il nuovo valore in console. Non appena il valore della variabile raggiunge zero - ferma il timer.

Cliccando sul secondo pulsante, ferma il timer. Ferma anche il timer, se il secondo pulsante non è stato premuto, ma il valore della variabile ha raggiunto zero.

Un programmatore ha scritto del codice che, cliccando su un pulsante, avvia un timer che visualizza in console l'ora corrente:

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

Dopo l'esecuzione del codice, tuttavia, si è scoperto che il pulsante di arresto non funziona. Correggi l'errore dell'autore del codice.

Un altro programmatore ha anche scritto del codice per risolvere il problema precedente:

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

Dopo l'esecuzione del codice, tuttavia, si è di nuovo scoperto, che il pulsante di arresto non funziona. Correggi l'errore dell'autore del codice.

Un altro programmatore ha anche scritto del codice per risolvere il problema precedente:

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

Dopo l'esecuzione del codice, tuttavia, si è di nuovo scoperto, che il pulsante di arresto non funziona. Correggi l'errore dell'autore del codice.

Un altro programmatore ha anche scritto del codice per risolvere il problema precedente:

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

Dopo l'esecuzione del codice, tuttavia, si è di nuovo scoperto, che il pulsante di arresto non funziona. Correggi l'errore dell'autore del codice.

Il codice che ho mostrato nella parte teorica non tiene conto del fatto che sul pulsante di avvio si può fare clic più volte. Per correggere questo problema, si può, al click sul pulsante di avvio, rimuovere l'event listener da questo pulsante, e al click sul pulsante di arresto - riassegnarlo. Correggi il problema.