Tlačidlá na spustenie a zastavenie časovača v JavaScripte

Teraz vytvorme dve tlačidlá: kliknutím na prvé sa časovač spustí a kliknutím na druhé - zastaví. Tu to už nebude také jednoduché a čaká nás úskalie. Aby sme pochopili podstatu tohto úskalia, popíšem vytvorenie kódu krok za krokom.

Takže, vytvoríme dve tlačidlá:

html<button id="start">start</button>
<button id="stop">stop</button>

Získame odkazy na tieto tlačidlá do premenných:

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

Kliknutím na prvé tlačidlo spustíme časovač, pričom jeho číslo zapíšeme do premennej:

javascriptstart.addEventListener('click', function() {
  let timerId = setInterval(function() {
    console.log('!')
  }, 1000);
});

A teraz zastavíme časovač kliknutím na druhé tlačidlo:

javascriptstart.addEventListener('click', function() {
  let timerId = setInterval(function() {
    console.log('!')
  }, 1000);
});

// Zastavíme časovač:
stop.addEventListener('click', function() {
  clearInterval(timerId);
});

Avšak, ak sa pokúsime spustiť vyššie uvedený kód, čaká nás prekvapenie: pri pokuse o zastavenie časovača sa ukáže, že premenná timerId sa rovná undefined! Prečo sa to stalo? Pretože pri spustení časovača sme urobili našu premennú timerId lokálnou vo vnútri funkcie priradenej k tlačidlu start.

Na vyriešenie problému urobíme premennú timerId globálnou - v tomto prípade bude prístupná ako vo funkcii na spustenie časovača, tak aj vo funkcii na jeho zastavenie:

javascriptlet timerId; // urobíme premennú globálnou

start.addEventListener('click', function() {
  timerId = setInterval(function() {
    console.log('!')
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval(timerId);
});

Задание 1

Nech je daná premenná, v ktorej sa pôvodne ukladá číslo 100. Sú dané aj dve tlačidlá. Kliknutím na prvé tlačidlo spustite časovač, ktorý každú sekundu zníži hodnotu premennej o 1 a vypíše novú hodnotu do konzoly. Akonáhle hodnota premennej dosiahne nulu - zastavte časovač.

Kliknutím na druhé tlačidlo zastavte časovač. Tiež zastavte časovač, ak druhé tlačidlo nebolo stlačené, ale hodnota premennej dosiahla nulu.

Задание 2

Nejaký programátor napísal kód, ktorý kliknutím na tlačidlo spúšťa časovač, ktorý vypisuje do konzoly aktuálny čas:

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet 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);
});

Po spustení kódu sa však ukázalo, že tlačidlo zastavenia nefunguje. Opravte chybu autora kódu.

Задание 3

Ďalší programátor tiež napísal kód pre riešenie predchádzajúcej úlohy:

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet 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);
});

Po spustení kódu sa však opäť ukázalo, že tlačidlo zastavenia nefunguje. Opravte chybu autora kódu.

Задание 4

Ďalší programátor tiež napísal kód pre riešenie predchádzajúcej úlohy:

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet 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);
});

Po spustení kódu sa však opäť ukázalo, že tlačidlo zastavenia nefunguje. Opravte chybu autora kódu.

Задание 5

Ďalší programátor tiež napísal kód pre riešenie predchádzajúcej úlohy:

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet 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();
});

Po spustení kódu sa však opäť ukázalo, že tlačidlo zastavenia nefunguje. Opravte chybu autora kódu.

Задание 6

Kód, ktorý som uviedol v teoretickej časti, nezohľadňuje to, že na tlačidlo start je možné vykonať niekoľko kliknutí. Na opravu tohto problému je možné po kliknutí na tlačidlo start odpojiť udalosť od tohto tlačidla, a po kliknutí na tlačidlo stop - pripojiť späť. Opravte problém.