Tlačítka pro spuštění a zastavení časovače v JavaScriptu

Nyní vytvořme dvě tlačítka: kliknutím na první nechť se časovač spustí a kliknutím na druhé - zastaví. Zde to již nebude tak jednoduché a čeká nás háček. Abyste pochopili podstatu tohoto háčku, popsal jsem vytváření kódu krok za krokem.

Takže, uděláme dvě tlačítka:

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

Získáme odkazy na tato tlačítka do proměnných:

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

Kliknutím na první tlačítko spustíme časovač, jehož číslo zapíšeme do proměnné:

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

A nyní zastavme časovač kliknutím na druhé tlačítko:

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

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

Pokusíte-li se však spustit výše uvedený kód, čeká vás překvapení: při pokusu zastavit časovač se ukáže, že proměnná timerId je rovna undefined! Proč k tomu došlo? Protože při spuštění časovače jsme naši proměnnou timerId učinili lokální uvnitř funkce připojené k tlačítku start.

K vyřešení problému udělejme proměnnou timerId globální - v tomto případě bude přístupná jak ve funkci pro spuštění časovače, tak ve funkci pro zastavení:

javascriptlet timerId; // učiníme proměnnou globální

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

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

Задание 1

Nechť je dána proměnná, ve které je inicialně uloženo číslo 100. Jsou dána také dvě tlačítka. Kliknutím na první tlačítko spusťte časovač, který bude každou sekundu snižovat hodnotu proměnné o 1 a vypisovat novou hodnotu do konzole. Jakmile hodnota proměnné dosáhne nuly - zastavte časovač.

Kliknutím na druhé tlačítko zastavte časovač. Zastavte také časovač, pokud druhé tlačítko nebylo stisknuto, ale hodnota proměnné dosáhla nuly.

Задание 2

Nějaký programátor napsal kód, který po kliknutí na tlačítko spouští časovač vypisující do konzole aktuální č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 spuštění kódu se však ukázalo, že tlačítko zastavení nefunguje. Opravte chybu autora kódu.

Задание 3

Jiný programátor také napsal kód pro řešení předchozí ú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 spuštění kódu se však opět ukázalo, že tlačítko zastavení nefunguje. Opravte chybu autora kódu.

Задание 4

Jiný programátor také napsal kód pro řešení předchozí ú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 spuštění kódu se však opět ukázalo, že tlačítko zastavení nefunguje. Opravte chybu autora kódu.

Задание 5

Jiný programátor také napsal kód pro řešení předchozí ú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 spuštění kódu se však opět ukázalo, že tlačítko zastavení nefunguje. Opravte chybu autora kódu.

Задание 6

Kód, který jsem uvedl v teoretické části, nebere v úvahu, že na tlačítko start lze provést několik kliknutí. K nápravě tohoto problému lze po kliknutí na tlačítko start odebrat událost z tohoto tlačítka, a po kliknutí na tlačítko stop - ji znovu připojit. Opravte problém.