Useampainaps painike JavaScriptin ajastimen käynnistämiseksi
Yllä esittämäni koodissa on itse asiassa tietty ongelma. Tämä ongelma ilmenee silloin, jos painikettamme napsautetaan useita kertoja. Tässä tapauksessa jokainen napsautus käynnistää uuden ajastimen.
Eli esimerkiksi kolme painikkeen painallusta johtaa siihen, että kolme ajastinta käynnistetään, ja jokainen näistä ajastimista tulostaa laskurin arvon konsoliin. Tämä tarkoittaa, että arvot muuttuvat kolme kertaa nopeammin!
Kuvatun ongelman ratkaisemiseksi tarvitsee vain tehdä niin, että painikkeen uudelleenpainaminen ei käynnistä uutta ajastinta. Esimerkiksi voitaisiin ajastimen käynnistämisen jälkeen irroittaa painikkeen käsittelijä:
let start = document.querySelector('#start');
start.addEventListener('click', function func() {
let i = 0;
setInterval(function() {
console.log(++i);
}, 1000);
this.removeEventListener('click', func); // irroittaa käsittelijän
});
Ota edellisen tehtävän ratkaisusi. Tarkista, että painikkeen usea painallus johtaa laskennan nopeutumiseen. Korjaa tämä ongelma.