Viacnásobné kliknutie na tlačidlo pre spustenie časovača v JavaScripte

Kód, ktorý som uviedol vyššie, má v skutočnosti istý problém. Tento problém sa prejaví v prípade, že na naše tlačidlo sa vykoná niekoľko kliknutí. V tomto prípade každé kliknutie povedie k spusteniu nového časovača.

To znamená, že napríklad tri kliknutia na tlačidlo spôsobia, že sa spustia tri časovače, a každý z týchto časovačov bude vypisovať hodnotu počítadla do konzoly. To znamená, že hodnoty sa budú meniť trikrát rýchlejšie!

Na vyriešenie opísaného problému je potrebné jednoducho zabezpečiť, aby opätovné stlačenie tlačidla neviedlo k novému spusteniu časovača. Napríklad, je možné po spustení časovača odpojiť od tlačidla priradený obslužný program kliknutia:

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

start.addEventListener('click', function func() {
  let i = 0;
  
  setInterval(function() {
    console.log(++i);
  }, 1000);
  
  this.removeEventListener('click', func); // odpojíme obslužný program
});