Knoppies om 'n timer op JavaScript te begin en stop
Laat ons nou twee knoppies maak: as die eerste een gedruk word, moet die timer begin, en as die tweede een gedruk word, moet dit stop. Hier sal dinge nie meer so eenvoudig wees nie en daar wag 'n strik op ons. Om die kern van hierdie strik te verstaan, sal ek die skepping van die kode stap vir stap uiteensit.
So, ons maak twee knoppies:
<button id="start">start</button>
<button id="stop">stop</button>
Kry verwysings na hierdie knoppies in veranderlikes:
let start = document.querySelector('#start');
let stop = document.querySelector('#stop');
As die eerste knoppie gedruk word, begin ons die timer en stoor sy nommer in 'n veranderlike:
start.addEventListener('click', function() {
let timerId = setInterval(function() {
console.log('!')
}, 1000);
});
En nou stop ons die timer as die tweede knoppie gedruk word:
start.addEventListener('click', function() {
let timerId = setInterval(function() {
console.log('!')
}, 1000);
});
// Stop die timer:
stop.addEventListener('click', function() {
clearInterval(timerId);
});
As jy egter probeer om die bogenoemde kode uit te voer, wag daar 'n verrassing: wanneer jy probeer om die timer te stop, sal dit blyk dat die veranderlike timerId gelyk is aan undefined! Hoekom het dit gebeur? Omdat ons, toe ons die timer begin het, ons veranderlike timerId plaaslik binne die funksie wat aan die start-knoppie gekoppel is, gemaak het.
Om die probleem op te los, laat ons die veranderlike timerId globaal maak - in hierdie geval sal dit toeganklik wees sowel in die funksie wat die timer begin as in die funksie wat dit stop:
let timerId; // maak die veranderlike globaal
start.addEventListener('click', function() {
timerId = setInterval(function() {
console.log('!')
}, 1000);
});
stop.addEventListener('click', function() {
clearInterval(timerId);
});
Gestel daar is 'n veranderlike wat aanvanklik die getal 100 stoor. Daar is ook twee knoppies. As die eerste knoppie gedruk word, begin 'n timer wat elke sekonde die waarde van die veranderlike met 1 sal verminder en die nuwe waarde in die konsole sal druk. Sodra die waarde van die veranderlike nul bereik, moet die timer gestop word.
As die tweede knoppie gedruk word, stop die timer. Stop ook die timer as die tweede knoppie nie gedruk is nie, maar die waarde van die veranderlike nul bereik het.
'n Sekere programmeerder het kode geskryf wat, wanneer 'n knoppie gedruk word, 'n timer begin wat die huidige tydstip in die konsole druk:
<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 die kode geloop is, het dit egter geblyk dat die stopknoppie nie werk nie. Korrigeer die outeur se fout.
'Nog 'n programmeerder het ook kode geskryf om die vorige probleem op te los:
<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 die kode geloop is, het dit weer geblyk dat die stopknoppie nie werk nie. Korrigeer die outeur se fout.
'Nog 'n programmeerder het ook kode geskryf om die vorige probleem op te los:
<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 die kode geloop is, het dit weer geblyk dat die stopknoppie nie werk nie. Korrigeer die outeur se fout.
'Nog 'n programmeerder het ook kode geskryf om die vorige probleem op te los:
<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 die kode geloop is, het dit weer geblyk dat die stopknoppie nie werk nie. Korrigeer die outeur se fout.
Die kode wat ek in die teoretiese deel gegee het, neem nie in ag dat die startknoppie verskeie kere gedruk kan word nie. Om hierdie probleem op te los, kan ons, wanneer die startknoppie gedruk word, die gebeurtenis van die knoppie loskoppel, en wanneer die stopknoppie gedruk word, dit weer vaskoppel. Los die probleem op.
