Knapper for å starte og stoppe timer i JavaScript

La oss nå lage to knapper: ved å klikke på den første skal timeren starte, og ved å klikke på den andre - stoppe. Her vil alt ikke være så enkelt, og vi venter en fallgruve. For å forstå essensen av denne fallgruven, la meg beskrive opprettelsen av koden trinn for trinn.

Så, vi lager to knapper:

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

Henter referanser til disse knappene i variabler:

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

Ved klikk på den første knappen starter vi timeren, og lagrer dens nummer i en variabel:

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

Og nå stopper vi timeren ved å klikke på den andre knappen:

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

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

Men hvis du prøver å kjøre koden ovenfor, venter det en overraskelse: ved forsøk på å stoppe timeren viser det seg at variabelen timerId er undefined! Hvorfor skjedde dette? Fordi ved oppstart av timeren gjorde vi vår variabel timerId lokal inni funksjonen bundet til knappen start.

For å løse problemet gjør vi variabelen timerId global - i dette tilfellet vil den være tilgjengelig både i funksjonen som starter timeren og i funksjonen som stopper den:

let timerId; // gjør variabelen global

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

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

Anta at det er gitt en variabel som initialt lagrer tallet 100. Det er også gitt to knapper. Ved å klikke på den første knappen, start en timer som hvert sekund vil redusere verdien av variabelen med 1 og skrive ut den nye verdien til konsollen. Så snart verdien av variabelen når null - stopp timeren.

Ved klikk på den andre knappen stopp timeren. Stopp også timeren hvis den andre knappen ikke ble klikket, men verdien av variabelen nådde null.

En programmerer skrev kode som ved klikk på en knapp starter en timer som viser gjeldende klokkeslett i konsollen:

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

Etter oppstart av koden viste det seg imidlertid at stoppknappen ikke fungerer. Rette opp i feilen i forfatterens kode.

En annen programmerer skrev også kode for å løse forrige oppgave:

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

Etter oppstart av koden viste det seg imidlertid igjen at stoppknappen ikke fungerer. Rette opp i feilen i forfatterens kode.

En annen programmerer skrev også kode for å løse forrige oppgave:

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

Etter oppstart av koden viste det seg imidlertid igjen at stoppknappen ikke fungerer. Rette opp i feilen i forfatterens kode.

En annen programmerer skrev også kode for å løse forrige oppgave:

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

Etter oppstart av koden viste det seg imidlertid igjen at stoppknappen ikke fungerer. Rette opp i feilen i forfatterens kode.

Koden jeg viste i den teoretiske delen tar ikke hensyn til at startknappen kan klikkes flere ganger. For å rette opp dette problemet kan man, ved klikk på startknappen, fjerne eventet fra denne knappen, og ved klikk på stoppknappen - binde det tilbake. Løs problemet.