Knapper til start og stop af timer i JavaScript

Lad os nu lave to knapper: ved klik på den første skal timeren starte, og ved klik på den anden - stoppe. Her vil det ikke være så enkelt, og der venter os en fælde. For at forstå essensen af denne fælde, vil jeg beskrive oprettelsen af koden trin for trin.

Så, vi laver to små knapper:

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

Vi henviser til disse knapper i variabler:

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

Ved klik på den første knap starter vi timeren og gemmer dens id i en variabel:

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

Og nu stopper vi timeren ved klik på den anden knap:

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

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

Men hvis du forsøger at køre koden vist ovenfor, venter der os en overraskelse: ved forsøg på at stoppe timeren viser det sig, at variablen timerId er lig med undefined! Hvorfor skete dette? Fordi vi ved start af timeren gjorde vores variabel timerId lokal inde i funktionen bundet til knappen start.

For at løse problemet lad os gøre variablen timerId global - i dette tilfælde vil den være tilgængelig både i funktionen, der starter timeren, og i funktionen der stopper den:

let timerId; // gør variablen global

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

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

Antag at der er givet en variabel, som initialt indeholder tallet 100. Der er også givet to knapper. Ved klik på den første knap, start en timer, som hvert sekund vil reducere værdien af variablen med 1 og udskrive den nye værdi til konsollen. Så snart værdien af variablen når nul - stop timeren.

Ved klik på den anden knap stop timeren. Stop også timeren, hvis den anden knap ikke blev klikket, men værdien af variablen nåede nul.

En programmør skrev kode, som ved klik på en knap starter en timer, der udskriver til konsollen det aktuelle tidspunkt:

<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 kørsel af koden viste det sig imidlertid, at stopknappen ikke virker. Ret programmørens fejl.

Endnu en programmør skrev også kode til løsning af den forrige opgave:

<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 kørsel af koden viste det sig imidlertid igen, at stopknappen ikke virker. Ret programmørens fejl.

Endnu en programmør skrev også kode til løsning af den forrige opgave:

<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 kørsel af koden viste det sig imidlertid igen, at stopknappen ikke virker. Ret programmørens fejl.

Endnu en programmør skrev også kode til løsning af den forrige opgave:

<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 kørsel af koden viste det sig imidlertid igen, at stopknappen ikke virker. Ret programmørens fejl.

Koden vist i den teoretiske del tager ikke højde for, at der kan foretages flere klik på startknappen. For at rette dette problem kan man ved klik på startknappen fjerne event-lyssneren fra denne knap, og ved klik på stopknappen - tilknytte den igen. Ret problemet.