Knappar för att starta och stoppa timer i JavaScript

Låt oss nu göra två knappar: när man klickar på den första ska timern starta, och när man klickar på den andra - ska den stanna. Här kommer det inte att vara lika enkelt och vi möter en fallgrop. För att förstå innebörden av denna fallgrop, kommer jag att beskriva skapandet av koden steg för steg.

Så, vi gör två knappar:

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

Hämta referenser till dessa knappar i variabler:

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

Vid klick på den första knappen startar vi timern och sparar dess ID i en variabel:

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

Och nu stoppar vi timern när man klickar på den andra knappen:

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

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

Men om man försöker köra koden ovan väntar en överraskning: när man försöker stoppa timern visar det sig att variabeln timerId är undefined! Varför hände detta? Eftersom vi när vi startade timern gjorde vår variabel timerId lokal inuti funktionen som är bunden till knappen start.

För att lösa problemet gör vi variabeln timerId global - i det här fallet kommer den att vara tillgänglig både i funktionen som startar timern och i funktionen som stoppar den:

let timerId; // gör variabeln global

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

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

Låt det finnas en variabel som initialt innehåller talet 100. Det finns också två knappar. När man klickar på den första knappen, starta en timer som varje sekund minskar variabelns värde med 1 och skriver ut det nya värdet till konsolen. När variabelns värde når noll - stoppa timern.

När man klickar på den andra knappen ska timern stoppas. Stoppa även timern om den andra knappen inte trycktes, men variabelns värde nådde noll.

En programmerare skrev kod som vid klick på en knapp startar en timer som skriver ut den aktuella tiden till konsolen:

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

Efter att koden startades visade det sig dock att stoppknappen inte fungerar. Rättaa felet i författarens kod.

En annan programmerare skrev också kod för att lösa föregående uppgift:

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

Efter att koden startades visade det sig dock återigen att stoppknappen inte fungerar. Rättaa felet i författarens kod.

En annan programmerare skrev också kod för att lösa föregående uppgift:

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

Efter att koden startades visade det sig dock återigen att stoppknappen inte fungerar. Rättaa felet i författarens kod.

En annan programmerare skrev också kod för att lösa föregående uppgift:

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

Efter att koden startades visade det sig dock återigen att stoppknappen inte fungerar. Rättaa felet i författarens kod.

Koden jag visade i den teoretiska delen tar inte hänsyn till att startknappen kan tryckas flera gånger. För att åtgärda detta problem kan man, när startknappen trycks, ta bort event-kopplingen från denna knapp, och när stoppknappen trycks - koppla tillbaka den. Åtgärda problemet.