Többszörös gombnyomás időzítő indításához JavaScriptben

A fent bemutatott kód valójában van egy kis problémája. Ez a probléma akkor nyilvánul meg, ha a gombunkra többször kattintunk. Ebben az esetben minden kattintás új időzítő indítását eredményezi.

Vagyis például három gombnyomás azzal fog járni, hogy három időzítő indul el, és ezek mindegyike kiírja a számláló értékét a konzolra. Ez azt jelenti, hogy az értékek háromszor gyorsabban fognak változni!

A leírt probléma megoldásához egyszerűen úgy kell eljárni, hogy az ismételt gombnyomás ne eredményezzen új időzítő indítását. Például, az időzítő indítása után le lehet választani a gombról a hozzárendelt kattintáskezelőt:

javascriptlet start = document.querySelector('#start');

start.addEventListener('click', function func() {
  let i = 0;
  
  setInterval(function() {
    console.log(++i);
  }, 1000);
  
  this.removeEventListener('click', func); // leválasztjuk a kezelőt
});