Nupud JavaScripti tajeri käivitamiseks ja peatamiseks

Teeme nüüd kaks nuppu: esimesele vajutamisel käivitugu tajer ja teisele vajutamisel - peatu-gu. Siin ei ole kõik nii lihtne ja meid ootab lõks. Selle lõksu olemuse mõistmiseks kirjutan koodi loomise samm-sammult.

Niisiis, teeme kaks nuppu:

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

Saame viited nendele nuppudele muutujatesse:

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

Esimesele nupule vajutamisel käivitame tajri, kirjutades selle numbri muutujasse:

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

Ja nüüd peatame tajri teise nupu vajutamisel:

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

// Peatame tajri:
stop.addEventListener('click', function() {
  clearInterval(timerId);
});

Kui aga ülaltoodud koodi käivitada, siis ootab meid üllatus: tajri peatamise katse korral selgub, et muutuja timerId võrdub undefined! Miks see nii juhtus? Sest tajri käivitamisel tegime oma muutuja timerId lokaalseks start nupuga seotud funktsiooni sees.

Probleemi lahendamiseks teeme muutuja timerId globaalseks - sel juhul on see kättesaadav nii tajri käivitamise funktsioonis kui ka peatamise funktsioonis:

javascriptlet timerId; // teeme muutuja globaalseks

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

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

Задание 1

Olgu antud muutuja, milles algselt hoitakse numbrit 100. Samuti on antud kaks nuppu. Esimesele nupule vajutamisel käivitage tajer, mis iga sekund vähendab muutuja väärtust 1 võrra ja väljastab uue väärtuse konsooli. Niipea kui muutuja väärtus jõuab nullini - peatage tajer.

Teisele nupule vajutamisel peatage tajer. Samuti peatage tajer, kui teist nuppu ei vajutatud, kuid muutuja väärtus jõudis nullini.

Задание 2

Mingi programmeerija kirjutas koodi, mis nupule vajutamisel käivitab tajri, mis väljastab konsooli praeguse ajahetke:

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

Pärast koodi käivitamist aga selgus, et peatamisnupp ei tööta. Parandage koodi autori viga.

Задание 3

Veel üks programmeerija kirjutas samuti koodi eelmise ülesande lahendamiseks:

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

Pärast koodi käivitamist aga jälle selgus, et peatamisnupp ei tööta. Parandage koodi autori viga.

Задание 4

Veel üks programmeerija kirjutas samuti koodi eelmise ülesande lahendamiseks:

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

Pärast koodi käivitamist aga jälle selgus, et peatamisnupp ei tööta. Parandage koodi autori viga.

Задание 5

Veel üks programmeerija kirjutas samuti koodi eelmise ülesande lahendamiseks:

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

Pärast koodi käivitamist aga jälle selgus, et peatamisnupp ei tööta. Parandage koodi autori viga.

Задание 6

Minu teoreetilises osas toodud kood ei arvesta seda, et start nuppu saab teha mitu vajutust. Selle probleemi parandamiseks võib start nupule vajutamisel sündmuse lahti siduda, ning stop nupule vajutamisel - uuesti kinnitada. Parandage probleem.