Knoppen om een timer te starten en te stoppen in JavaScript
Laten we nu twee knoppen maken: wanneer op de eerste wordt geklikt, moet de timer starten, en wanneer op de tweede wordt geklikt - stoppen. Hier zal het allemaal niet zo eenvoudig zijn en wacht een valstrik op ons. Om de essentie van deze valstrip te begrijpen, zal ik de creatie van de code stap voor stap beschrijven.
Dus, we maken twee knopjes:
<button id="start">start</button>
<button id="stop">stop</button>
We halen verwijzingen naar deze knoppen op in variabelen:
let start = document.querySelector('#start');
let stop = document.querySelector('#stop');
Bij het klikken op de eerste knop starten we de timer, en slaan het nummer op in een variabele:
start.addEventListener('click', function() {
let timerId = setInterval(function() {
console.log('!')
}, 1000);
});
En nu stoppen we de timer door op de tweede knop te klikken:
start.addEventListener('click', function() {
let timerId = setInterval(function() {
console.log('!')
}, 1000);
});
// We stoppen de timer:
stop.addEventListener('click', function() {
clearInterval(timerId);
});
Als we echter de bovenstaande code proberen uit te voeren,
wacht ons een verrassing: bij het proberen te stoppen
van de timer zal blijken dat de variabele timerId
gelijk is aan undefined! Waarom gebeurde dit?
Omdat we bij het starten van de timer
onze variabele timerId lokaal hebben gemaakt binnen
de functie, gebonden aan de knop start.
Om het probleem op te lossen, maken we de variabele timerId
globaal - in dit geval zal deze beschikbaar zijn
zowel in de functie die de timer start, als in de functie
die de timer stopt:
let timerId; // maak de variabele globaal
start.addEventListener('click', function() {
timerId = setInterval(function() {
console.log('!')
}, 1000);
});
stop.addEventListener('click', function() {
clearInterval(timerId);
});
Stel dat er een variabele is waarin aanvankelijk
het getal 100 is opgeslagen. Er zijn ook twee
knoppen. Door op de eerste knop te klikken, start u
een timer die elke seconde de waarde van de variabele
met 1 zal verminderen en de nieuwe waarde
in de console zal uitvoeren. Zodra de waarde
van de variabele nul bereikt - stop de timer.
Door op de tweede knop te klikken, stopt u de timer. Stop ook de timer als de tweede knop niet werd ingedrukt, maar de waarde van de variabele nul bereikte.
Een programmeur heeft code geschreven die bij het klikken op een knop een timer start, die het huidige tijdstip in de console uitvoert:
<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);
});
Na het starten van de code bleek echter dat de stopknop niet werkt. Verbeter de fout van de auteur van de code.
Nog een programmeur schreef ook code voor de oplossing van de vorige 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);
});
Na het starten van de code bleek echter opnieuw, dat de stopknop niet werkt. Verbeter de fout van de auteur van de code.
Nog een programmeur schreef ook code voor de oplossing van de vorige 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);
});
Na het starten van de code bleek echter opnieuw, dat de stopknop niet werkt. Verbeter de fout van de auteur van de code.
Nog een programmeur schreef ook code voor de oplossing van de vorige 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();
});
Na het starten van de code bleek echter opnieuw, dat de stopknop niet werkt. Verbeter de fout van de auteur van de code.
De code die ik in het theoretische deel heb gegeven houdt geen rekening met het feit dat op de startknop meerdere keren geklikt kan worden. Om dit probleem op te lossen kan men bij het klikken op de startknop het event van deze knop loskoppelen, en bij het klikken op de stopknop - opnieuw koppelen. Verbeter het probleem.
